Content

Live Preview

Once you've finished adding content to your modal window, take advantage of the ‚Modal Preview‘ button. This handy feature allows you to see exactly how your modal window will look and behave to your visitors before making it live on your website.

Adding Content to Modal Window

Modal Window Pro allows you to incorporate a wide variety of content into your popups, making them highly customizable and engaging. You have the flexibility to use either the classic editor or the text editor.

Shortcode Integration

The plugin supports shortcodes from other plugins. You need just insert the shortcode into the modal window content.

Built-in Shortcodes

Modal Window Pro provides a set of pre-defined shortcodes for common modal elements:

• videoBox: Embed a video from YouTube or Vimeo directly into your modal.
• buttonBox: Create a button with a custom link or a close button for the modal.
• iframeBox: Insert any iframe content, such as a PDF file or a map, within the modal.
• wow-icon: Insert the Font Awesome Icon into the content.
• w-row - create row.
• w-column - create a column and has the attributes:
  • width - this value can be from 1 to 12. Value 12 = 100% width for column.
  • align - this value can be: left, center, right.
• {form} - For insert form into modal window content use this tag.

Style

General

Properties

• Z-index: This property controls the stacking order of your modal. Higher z-index values ensure the modal appears on top of other elements on your page.
• Block Page: Choose whether you want to prevent users from scrolling the background page while the modal is visible.
• Width & Height: Set the desired width and height for your modal.

Visual Design

• Radius: Define the curvature of the modal's corners for a smoother aesthetic.
• Shadow: Apply a shadow effect to your modal and choose a custom shadow color.
• Background Color: Select a solid background color for your modal.
• Background Image: Optionally, set a background image for your modal.
• Overlay: Show or hide a background overlay behind the modal. This can help draw attention to the modal.
• Font Family: Choose the typeface that best complements your website's design and content.
• Font Size: Set the desired size for the main text within your modal.
• Padding: Specify the amount of space between the modal's content and its border.
• Border Style: Select a border style (e.g., solid, dashed, dotted) to further define the content area.
• Border Thickness: Control the width of the border around the modal's content.
• Border Radius: Define the curvature of the content area's corners for a softer appearance.
• Border Color: Choose a color for the border surrounding the modal's content.
• Scrollbar Thickness: Adjust the thickness of the scrollbar within the modal window to match your design preferences and improve user interaction.
• Scrollbar Color: Customize the color of the scrollbar to align with your site's aesthetic and ensure it stands out or blends in as needed.
• Scrollbar Background: Set the background color of the scrollbar track, enhancing the visual appeal and coherence with your overall design.

Location

Determine the placement of your modal windows on the screen with customizable options for top, center, bottom, left, right, and custom positions, ensuring optimal visibility and user engagement.

• Top: Adjust the modal's vertical position from the top of the page.
• Bottom: Adjust the modal's vertical position from the bottom of the page.
• Left: Adjust the modal's horizontal position from the left side of the page.
• Right: Adjust the modal's horizontal position from the right side of the page.

Title

Customize the appearance of your modal window title, including font, size, color, alignment, background, and padding, to perfectly match your website’s design and enhance visual appeal.

• Used title as Modal Title - Automatically use the title of the linked content as the title for the modal window, streamlining the creation process and ensuring consistency across your site.

Close Button

Customize the appearance and behavior of the close button for your modal windows, including its design, size, color, and position to enhance user control and experience.

Mobile Rule

Set the modal width for mobile devices if you need

• Mobile screen: Choose whether to display your modal on smaller screens (phones and tablets). You can also set a specific screen size breakpoint to define "mobile."
• Width: Set a custom width for your modal on mobile devices to ensure optimal viewing and user experience.

Settings

Triggers

Control exactly when and how your Modal Window appears on your website using these trigger options:

Trigger Types:

• Auto: Opens the modal automatically when the page loads. You can optionally set a delay in seconds to control display timing.
• Click: Triggers the modal when a user clicks on a specific element:
  • Class: Use a class name within an anchor tag or a span element to target a button or element (e.g., Open modal).
  • URL: Opens the modal when a user clicks a link with a specific URL fragment (e.g., Open modal).
• Hover: Makes the modal appear when a user hovers over an element:
  • Class: Target an element using its class name (e.g., <span class="wow-modal-id-1">Open modal</span>).
  • URL: Trigger the modal when a user hovers over a link with a specific URL fragment (e.g., <a href="#wow-modal-id-1">Open modal</a>).
• Scrolled: Opens the modal when the user scrolls down the page a certain percentage (set using the Scroll Distance option).
• Exit: Shows the modal as the user attempts to leave the website (useful for exit-intent campaigns).

Show Once:

Enable this option to set a option that prevents the modal from showing again to the same user for a specified period (in days).

Animation

Enhance the visual appeal of your modal windows with a variety of animation effects and transitions, allowing you to create engaging and dynamic user experiences. Customize the animation style and timing to suit your website’s design and capture visitor attention.

Closing Modal

Configure the behavior of your modal windows upon closing, including options for auto-close timing, redirecting users to specific URLs, disabling the close button temporarily. Enhance user experience by controlling how and when modals are dismissed.

• Overlay: Enable closing the modal window by clicking on the overlay background, offering a convenient way for users to dismiss the modal.
• Esc: Allow users to close the modal window by pressing the Esc key for convenient and intuitive interaction.

Targeting & Rules#back to top

Display Rules

Define the specific conditions under which your modal windows appear. Tailor your modal display to various content types and user interactions for precise targeting and enhanced user experience.

• Everywhere: Display the modal window on all pages and posts across the site.
• Shortcode: Use a shortcode to place the modal window in specific content areas manually.

Responsive Visibility

Control the visibility of your modal windows across different device types and screen sizes to ensure an optimal user experience on all platforms.

• Hide on Smaller Screens: Prevent the modal window from displaying on screens smaller than a specified width (in pixels).
• Hide on Larger Screens: Prevent the modal window from displaying on screens larger than a specified width (in pixels).

Floating Button

Enhance user interaction by adding a customizable floating button to trigger your modal windows. Adjust its location, style, and animation to seamlessly integrate with your website’s design.

• Location: Position the floating button anywhere on the screen (e.g., bottom right, bottom left) to ensure optimal visibility and accessibility.
• Style: Customize the appearance of the floating button, including size, shape, color, and icon, to match your website’s aesthetics.