Modal Window – create popup modal window

توسط Wow-Company

Use the free WordPress popup plugin “Modal Window” to quickly and easily create informative popups. Add the text and media you need, insert shortcodes of forms and much more. Change the behavior of the display of modal windows depending on the user’s actions on the page.

The Modal Window is a unique tool for free use. With its help, you can add bright information popup messages to the site, warn visitors about various promotions, or display contact forms to increase conversions. The plugin allows you to set the data display in a modern, interactive format.

Create modal windows and insert any kind of content, from simple text to complex layouts with columns and media.

Main features

The WordPress plugin Modal Window will help you quickly get the attention of visitors. Its functionality makes it possible to implement high-quality modal windows for any query.

Unlimited Modals: Create as many modal windows as you need without restrictions.
HTML Content Editor: Easily add and format text, images, and other content within your modal windows using a built-in HTML editor.
Floating Button Trigger: Create a stylish floating button to trigger your modal. Customize its position, icon, text, and add eye-catching animations (bounce, pulse, shake, etc.).
Advanced Shortcodes: Includes built-in shortcodes for Video (YouTube/Vimeo), iFrames, Buttons, Icons (Font Awesome 7+), and Column layouts (rows/columns).
Open Triggers: Choose from various triggers: Click, Auto (timer), Hover, Exit Intent, and Scroll events.
Custom Styling: Deeply customize Modal Titles, Close Buttons, Backgrounds, Shadows, and even the Scrollbar style to match your brand.
Responsive Control: Set different widths for mobile devices and hide modals on specific screen sizes (Mobile/Desktop).
WCAG & Accessibility: Improved compliance with ARIA attributes (aria-live, role=”dialog”) for better screen reader support.
Overlay and Esc Key: Allow users to close modal windows by clicking on the overlay or pressing the Esc key.
Import/Export: Easily move your modal window settings between websites.
Show Once (Cookies): Control the frequency of display using cookies to avoid annoying returning visitors.

—

Discover even more features with the Pro version of the Modal Window plugin, available at wow-estore.com.

—

The free Modal Window plugin is the best tool to create information pop-up blocks quickly and easily. It allows you to display any kind of content on the page. Add and edit text messages, shortcodes of various forms, images, and other media files with its help.

Included Shortcodes

Maximize your modal content with these built-in shortcodes:
* [videoBox] – Insert responsive YouTube or Vimeo videos.
* [iframeBox] – Embed external web pages or interactive content.
* [buttonBox] – Create beautiful “Link” or “Close Modal” buttons.
* [wow-icon] – Add any of the 2000+ Font Awesome icons.
* [w-row] & [w-column] – Create complex multi-column layouts easily.

Common use cases

The free version of the Modal Window plugin is versatile and can be used in various scenarios to enhance your website’s functionality and user engagement.

Promotions and Announcements

Special Offers: Display limited-time promotions or discounts to capture visitor interest and drive sales.
Event Announcements: Inform users about upcoming events, webinars, or product launches directly on your site.

Lead Generation

Newsletter Sign-Ups: Create pop-ups to encourage visitors to subscribe to your newsletter, helping you grow your email list.
Contact Forms: Embed contact forms within modals to make it easy for visitors to reach out to you without leaving the page.

Content Display

Important Information: Highlight critical updates or information, such as privacy policies or terms of service changes.
Multimedia Content: Showcase videos, image galleries, or other multimedia content in a visually appealing modal window.

User Interaction

Surveys and Feedback: Collect user feedback or conduct surveys to gather insights and improve your services.

Navigation and Guidance

Site Tours: Guide new users through your website’s features with step-by-step tutorials in modal windows.
Pop-Up Menus: Create additional navigation options with pop-up menus that enhance user experience.

Use with other FREE plugins to maximize your results

Counter Box – Quickly and easily create countdowns, counters, and timers with a live preview.
Buttons – Easily create beautiful, customizable standard, floating, and social sharing buttons. Increase click-through rates and enhance your user experience.
Calculator Builder – A simple way to create an online calculator.
Floating Button – WordPress plugin designed to generate and manage sticky Floating Buttons, capable of performing any defined actions on your website.
Herd Effects – Designed to create a “sense of queue” or “herd effect”, motivating the visitors of the page to perform any actions.

Try other our plugin for create menu:

Floating Button – Easily generate and manage sticky floating buttons.
Sticky Buttons – Easily create sticky buttons with varying complexity.
Bubble Menu – Create an awesome circle menu with icons.
Float menu – Easily create floating menus with varying complexity.
Side Menu – Provide any extra content and functionality with the attention-grabbing side menu.

Support

Search for answers and ask your questions at support center

Installation option 1: Find and install this plugin in the Plugins -> Add new section of your wp-admin
Installation option 2: Download the zip file, then upload the plugin via the wp-admin in the Plugins -> Add new section. Or unzip the archive and upload the folder to the plugins directory /wp-content/plugins/ via ftp
Press Activate when you have installed the plugin via dashboard or press Activate in the Plugins list
Go to Modal Window section that will appear in your main menu on the left
Click Add new to create your first modal window
Setup your modal window
Click Save
Copy and paste the shortcode, such as [Modal-Window id=1] to where you want the modal window to appear.
If you want it to appear everywhere on your site, you can insert it for example in your header.php, like this: <?php echo do_shortcode('[Modal-Window id=1]');?>

سوالات متداول

How to create a Modal window?

Click Add new to create your first modal window
Setup your modal window
Click Save
Copy and paste the shortcode, such as [Modal-Window id=1], to where you want the modal window to appear. For Example: insert shortcode [Modal-Window id=1] into a page/post content
If you want it to appear everywhere on your site, you can insert it for example in your footer.php, like this: <?php echo do_shortcode('[Modal-Window id=1]');?>

Prevent page jumping to top when opening modal

If the page jumping to the top when opening a modal via a link lower down on a page add the next CSS code:

html.no-scroll, body.no-scroll {
    overflow: visible !important;
}

In the site dashboard:

Go to the page ‘Appearance’->’Customize’
Click ‘Additional CSS’
Add CSS code
Click ‘Publised’

How to close the modal window using custom button

You can сlose popup via adding to the element:

Class – wow-modal-close-X, like <span class="wow-modal-close-X">Close Popup</span>
ID – wow-modal-close-X, like <span id="wow-modal-close-X">Close Popup</span>
URL – #wow-modal-close-X, like <a href="#wow-modal-close-X">Close Popup</a>

Where X = Modal window ID

The modal window on the frontend does not change after making changes to the settings

If you use the cache (W3 Total Cache, WP Super Cache, WP Rocket) or minify plugins (Autoptimize, Fast Velocity Minify) try deactivate them and tested the modal window.
If the modal window shows correctly, reset the cache of these plugins.

The modal window not show

Check whether you have inserted a modal window on the page. You can insert the modal window via shortcode or option ‘Publish’ -> ‘All posts and pages’
Check that the site’s protocol matches WordPress Address (URL) & Site Address (URL) in the Settings-> General

How to open a modal window clicking on the link?

Create a modal window
Copy and paste the shortcode, such as [Modal-Window id=1], to where you want the modal window to appear.
Insert a link like <a href="https://wow-estore.com/#wow-modal-id-1">Open Modal Window</a> to the page.

How to open a modal window clicking on the button ?

Create a modal window
Copy and paste the shortcode, such as [Modal-Window id=1], to where you want the modal window to appear.
Insert a button like <button id="wow-modal-id-1">Open Modal Window</button> to the page.

Can I insert a shortcode into the modal window?

Yes, you can inert any shortcode into the content of modal window

The modal window doesn’t scrolling

This happens if the height of the modal is set to auto and is less than the height of the screen.

To solve this problem: