Modal Window – create popup modal window

1. 01Installation option 1: Find and install this plugin in the Plugins -> Add new section of your wp-admin
2. 02Installation 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
3. 03Press Activate when you have installed the plugin via dashboard or press Activate in the Plugins list
4. 04Go to Modal Window section that will appear in your main menu on the left
5. 05Click Add new to create your first modal window
6. 06Setup your modal window
7. 07Click Save
8. 08Copy and paste the shortcode, such as [Modal-Window id=1] to where you want the modal window to appear.
9. 09If 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:

1. 01Go to the page ‘Appearance’->’Customize’
2. 02Click ‘Additional CSS’
3. 03Add CSS code
4. 04Click ‘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:

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