General Settings

Style

This section is intended to adjust the display style of a modal window. Allows to change the appearance of a pop-up block, its size and color scheme. The main feature set includes:

  • width – used to change the modal window width;
  • height – specifies the height of the pop-up unit;
  • padding – used to configure the internal indents from the content to the parent container.

Framework unit display is regulated:

  • border width – sets the border thickness around the window;
  • border radius – determines the degree of rounding the block corners;

The starting position is determined by:

  • position – sets the positioning parameters of an element on the page (absolute or fixed);
  • z-index – indicates the parameters of the “overlapping” the other elements by the window.

The following values allow to indicate the distance from the pop-up window to the parent element in percentage :

  • top position and Bottom position – from the top and bottom edges, respectively;
  • left position and Right position – from the left and right edge.

To set the background of the window and change its color schemes are used:

  • Background image – add a background image in a modal window box with the specified reference;
  • Overlay – allows to plug the background layer overlay to a web page when displaying the window and select its color;
  • Background color – sets the general color block solution;
  • Border color – determines the display frame color.

Style block is used to give the modal window a distinctive style that corresponds to specific user targets. With just a few clicks you can create an attractive block with important information for visitors.

In this unit the style of pop-ups on mobile devices can be adjusted. One can set:

  • trigger screening less than the specified resolution;
  • form width.

Specifying the settings allow to display modal windows on a site very harmoniously for small screen devices owners.

Back To Top

Close Button

Extended settings unit is designed to modify the appearance of the modal window close button. With the help of it one can specify alternative ways of completing the pop-up display unit, such as clicking on the background layer (overlay) or «Esc» button. «Select a type» menu item allows to choose the type of button display as a graphic element (image) or a short text message (text). Main settings unit for “image” includes:

  • size – setting the size of the cover form;
  • top position – location on the Y axis;
  • right position – location on the X axis;
  • delay –  specifying  the delay time of button appearance;
  • background color – sets the background image color;
  • color –  is used to select a color of the graphic element (or text) display .

When choosing a close button in the form of text, appear some additional parameters:

  • content – a field for entering a text message. The specified text will be displayed on the close button of a modal window;
  • padding top & bottom – internal upper and lower indent from the content to the closing element borders;
  • padding left & right – internal indent on the left and right sides from the button content to the container borders;
  • border width – it allows you to set the display frame width around the form;
  • border radius – adds a decorative effect of rounding button corners;
  • border color – sets the frame color.

With the Close Button menu it’s easy to create and configure bright closing buttons for the modal window. Closing element delay output function will attract the user’s attention to the information, provided by the pop-up block.

Back To Top

Display

Flexible display trigger system enables optimal configuring the information window display, depending on the user’s actions:

  • after page loading;
  • clicking on a link with the set id or anchor;
  • scrolling the window;
  • closing the page.

In this section pop-up unit re-demonstration for a particular user can be set (using cookies). Additionally should be specified:

  • reset in – reset the display after a set number of days;
  • delay – the delay time for the modal window display on the user’s screen;
  • reach – pop-up block display after reaching the specified page size while scrolling.

Animation Settings section contains a large set of effects for dynamic display appearing (Animate In) and closing (Animate Out) of the pop-up box. They are designed to attract the attention of a web resource visitors to the content of the modal window. To “revive” the page one can use:

  • rolling out;
  • bouncing;
  • falling;
  • dividing a block into several pieces;
  • fading;
  • pulsating;
  • zoom and much more.

Changing the duration of the applied effect (Animation duration) will create the necessary impression and allow to focus on a specific block. Animation is used to add dynamics to the page, to improve aesthetic display unit.

Back To Top

Float Button

In the Button menu a special button withdrawal to call the modal window can be allowed. There are some additional settings with the following options:

  • button position – allows you to place a call button at the top of the window, bottom, the left or righ side of the page;
  • button’s text – a field for entering the name of the element;
  • button width – sets the width of the button;
  • button color – sets the form color;
  • button hover color – determines the illumination color while hovering the mouse cursor on the item.

With the help of the button it is possible to review the pop-up block information at any time. This is useful when displaying important news or offers for the user.

Back To Top

Additional options

In the modal window display menu one can set up more detailed parameters of its displaying:

  • pop-up unit display (Show for users) is set both for all visitors and selectively: for authorized or unauthorized site users;
  • «Show after modal window» function helps to set pop-up blocks display options one after another, if cookies are used;
  • block display can be limited depending on the screen resolution;
  • the language filter on the page sets in the drop-down list.

Popups display can be carried out on all the pages in all the website publications indicating the specified exceptions, choosing pages/posts by the set id or inserted shortcode at the same time.

Back To Top

Editor

Convenient editor with features familiar to many users is designed for rapid entry and change the information you need. Setting the display of text content is done via the menu panel. It allows:

  • specify the text style;
  • align the content to the page width or the page edges;
  • add lists and quotations;
  • insert, edit and delete links;
  • expand the editor to full screen;
  • display additional toolbar (changing the color of messages, insertion of a horizontal line, specifying indents and other tasks).

To add media files in the window just choose them on a local disk or link to the third-party site. Downloaded from an external source image, audio and video, are stored in the shared library, where they can be grouped by date and sorted by the galleries, playlists. Each media file is additionally defined by a title, caption, and description. The image has an alternative text and proportions input fields, the ability to customize miniatures. For a detailed study of the appearance of a pop-up content unit, there is easy to use HTML-editor. It enables formatting with special tags and set precise settings of the window display content. It supports the use of shortcodes (shortcode) for various purposes.

Back To Top

FAQ

Open popup via link

1. Create a modal window

2. In the option “Show a modal window select” -> “Click on a link (with an #anchor link)”

3. Insert a link like <a href="”https://wow-company.com/#wow-modal-id-1″">Modal Window</a> to the page.

Back To Top

Open popup via ID

1. Create a modal window

2. In the option ‘Show a modal window select’ -> ‘Click on a link (with id)’

3. Copy and paste the shortcode or chose option, where you want the modal window to appear.

4. Insert a button like <button id=”id=’wow-modal-id-1′”>Modal Window</button> to the page.

Back To Top

Close and open popup

You can use ID wow-button-close-X, where X – ID a modal window, for closing a modal window and link as #wow-modal-id-X for open a new modal window.

Example of link for close a parent window and open new window:

<a id="wow-button-close-2" href="#wow-modal-id-1">New Modal</a>

Back To Top

Show second after first popup

«Show after modal window» function allows setting the sequential windows display dependence on the site. To do this it’s necessary to:

1. Create and name the first modal window (Window 1).

2. In the Display section set the cookies support and specify the reset time (Reset in) for pop-up block.

3. Create and name the second modal window (Window 2).

4. In the «Show modal window» unit check on the item «Show after modal window». Select the name of the first (the one before display) pop-up block in the appeared drop-down list. Save all settings through the «Update».

Visiting the site for the first time the user will see Window 1, and for the second time – Window 2. The first block rerun depends on the settings in the Reset in field. The same can be done for the next information blocks display. The plugin allows creating a whole network of dependencies used in a modal windows web resource.

Back To Top

Examples

Image background

Create a popup with the Image background.

Modal Window content

<h2 style="margin-top: 0px;"><span style="color: #ffffff;">Setup a background image</span></h2>
<h4><span style="color: #ffffff;">This is an example of a modal window with a background image</span></h4>
&nbsp;

&nbsp;
<p class="wow-modal-close-20" style="text-align: center; padding: 10px; border: 2px solid #ffffff; cursor: pointer;"><span style="color: #ffffff;">CLOSE MODAL WINDOW</span></p>

Style

Close Button

Display

 

Back To Top

Open popup when scroll page down

Modal Window content

<p style="margin-top:0px"><span style="color: #333333;">Hi there! I see you have reached the end of this page. I have a gift for you. Tell me your email so that I can send it to you!</span></p>
{form}

Style

 

Close Button

 

Display

 

Form

 

Back To Top

Floating block with a button

Modal Window content

<h3 style="margin: 0px;"><span style="color: #ffffff;">Subscribe to get our freebies and tips!</span></h3>

<p><span style="color: #ffffff;">This is an example of a flyout.</span></p>

<p>{form}</p>

Style

Close Button

Display

Button

Form

Back To Top

Feedback Form

Modal Window content

<h2 style="margin-top: 0px;"><span style="color: #ffffff;">What is on your mind?</span></h2>
<h4><span style="color: #ffffff;">You could suggest features, report bugs, etc.</span
<p>{form}</p>

Style

Close Button

Display

Button

Form

Back To Top

Menu

Modal Window content

<h2 style="text-align: center;"><span style="color: #ffffff;"><a style="color: #ffffff;" href="https://wow-company.com/modal-windows-pro"> HOME</a></span></h2>
<h2 style="text-align: center;"><span style="color: #ffffff;"><a style="color: #ffffff;" href="https://wow-company.com/modal-windows-pro/documentation/">Documentations</a></span></h2>

Style

Close Button

Back To Top

Info-Bar Top

Modal Window content

<p style="text-align: center; color:#fff; margin:0;"><strong>Unlimited web, stock and graphics downloads!</strong> <span style="padding:5px 30px;background:#d63969;color:#fff;border-radius:5px;">Get 34% Off</span></p>

Style

Close Button

Back To Top