Modal Window - ChoosePlugin.com

Easily create a modal window (also known as a popup)

Author:	Wow-Company (profile at wordpress.org)
WordPress version required:	4.3
WordPress version tested:	6.5
Plugin version:	5.3.10
Added to WordPress repository:	06-05-2016
Last updated:	09-04-2024
Rating, %:	80
Rated by:	33
Plugin URI:	https://wordpress.org/plugins/modal-window/
Total downloads:	289 891
Active installs:	10 000+
Click to start download

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 the unique tool for free use. With its help you can add bright information popup messages to the site, warn visitors about various promotions, display contact forms to increase the conversion of the resource. The WordPress popup plugin will allow you to set the data display in the new format.

Create modal windows and insert any kind of content.

Main features

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

Place any kind of content
Use the function editor to configure the contents of the block
Change the height and width of windows
Set the window closing options by clicking on Overlay or the Esc key
Change settings for mobile devices
Output of the window via the button or the menu item
Display the modal window depending on user behavior
Use cookies to customize the display of the pop-up block
Copy and paste the shortcode of the window anywhere

Pro version

Discover even more features with the Pro version of the Modal Window plugin:

Create an unlimited number of modal windows
Change the display of the window depending on the user’s status
Set the output of the block on all or individual pages via ID
Modify the behavior of modal windows in accordance with the language of the site
Set limits for screens with the small resolution
Use advanced features to customize the appearance
Insert the background image
Change the start point of the window
Add borders and change their color for each pop-up block
Use the variety of color palettes
Choose the type and behavior of the closing button
Use the time delay for the effective appearance of the block
Set the bright animation when the window appears and closes
Change the duration of the effect at your discretion
Display the button for the modal window in the form of an icon and / or text
Add the animation for the button, change its color and location on the page
Create convenient and functional pop-up panels
Generate unlike icons using the built-in menu “icons”
And more…

Preview of Pro version

Buy Pro version

The free Modal Window plugin is the best tool to create information pop-up blocks quickly and easy. 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.

Can be used for:

pop-up notifications;
detailed description of the service or the product;
windows with the contact form;
blocks with large images of products;
pop-up video instructions;
error messages or warnings;
windows with interactive maps and much more.

Use with other plugins to maximize your results

Frequently Asked Questions

View Answers:

How to create a Modal window?
How to open ‘Modal Window’ via a Side Menu?
How to open a modal window clicking on the link?
How to open a modal window clicking on the button?
How to insert a form into a modal window?
Can I insert a shortcode into the modal window?

Support

Search for answers and ask your questions at support center

Screenshots
FAQ

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 ‘Modal Window’ via a Side Menu?

Install plugin Side Menu – add fixed side buttons

Create a modal window
In the option Show a modal window select -> Click on a link (with id)
Copy and paste the shortcode, such as [Modal-Window id=1], to where you want the modal window to appear.
Create Side Menu Item via plugin Side Menu
In the option Item type select -> link
Then enter which modal window to show. Enter link such as #wow-modal-id-1
Save Menu Item

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.

How to insert a form into a modal window?

Install plugin Wow Forms

Create a Form via plugin Wow Forms
Copy and paste the shortcode, such as [Wow-Forms id=1] into the content field in the modal window settings.

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:

Set the value to option “Modal Height”
Select the value “Modal Height” % or px, but not auto

Hide FAQ

ChangeLog

Main features

Pro version

Can be used for:

Use with other plugins to maximize your results

Frequently Asked Questions

Support

5.3.10

5.3.9

5.3.8

5.3.7

5.3.6

5.3.5

5.3.4

5.3.3

5.3.2

5.3.1

5.3

5.2.3

5.2.2

5.2.1

5.2

5.1.1

5.1

5.0.6

5.0.5

5.0.4

5.0.3

5.0.2

5.0

4.0.3

4.0.2

4.0.1

4.0

3.2.2

3.2.1

3.2

3.1.2

3.1.1

3.1

3.0

2.5

2.4

2.3.4

2.3.3

2.3.2

2.3.1

2.3

2.2.1

2.2

2.1.2

2.1.1

2.1

2.0

1.3

1.2.1

1.2

1.1

1.0