Modal Popup

How to use Modal Popup Widget of Sky Addons for Elementor

The Sky Addons Modal Popup widget lets you build conversion-grade popups directly inside Elementor — no third-party popup plugin required. With the Modal Popup widget you choose how the popup opens (a button click, page load, a timed delay, on scroll, exit intent, a custom CSS selector, or a URL hash), what it shows (custom content, a saved Elementor template, or a remote URL loaded via AJAX), and who sees it (cookie suppression, visit counting, scheduling, and per-URL hiding). Twelve entrance animations, nine position presets, draggable panels, and an animated page-behind effect round out a popup system built for offers, opt-ins, and announcements. Everything is configured visually from the Elementor panel using Sky Addons. This documentation will guide you through the process of using the Modal Popup Widget to create engaging, rule-driven popups on your website.

Features:

1. Seven Trigger Types: Open the popup on Button Click, Page Load, After Delay, On Scroll, Exit Intent, a Custom Selector, or a Hash URL — one widget covers every launch scenario.
2. Three Content Sources: Fill the popup with Custom Content (a title plus WYSIWYG body), a Saved Template (any Elementor template), or a Remote URL whose HTML is fetched via AJAX when the popup opens.
3. Display Rules: Show once per visitor via a cookie, show only after N visits, schedule a start and end date/time, and suppress the popup on specific URLs.
4. Twelve Entrance Animations: Fade, Zoom, four Slide directions, Bounce, Flip X/Y, Rotate, Flow, and Unfold — with a configurable animation duration.
5. Nine Position Presets: Center, Top, Bottom, Left, Right, and all four corners for full control over where the panel appears.
6. Close Behavior: Close on overlay click, close on the ESC key, an inside or outside close button aligned left or right, auto-close after a set time, and redirect on close.
7. Sticky Reopen Button: A floating button that reopens the popup after it has been dismissed — perfect for keeping an offer within reach.
8. Page-Behind Animation: Add depth by blurring, scaling, or sliding the rest of the page while the popup is open.
9. Draggable Panel & Backdrop Blur: Let visitors drag the popup around, and apply a frosted-glass blur behind it for a modern overlay.

Insert Modal Popup Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Modal Popup in the widget panel and drag it onto the canvas.
3. With the default Button Click trigger, an “Open Popup” button renders on the canvas. For other triggers, an editor-only hint shows how the popup will open — the popup itself stays hidden until previewed.

Configure Content

The Content section sets what the popup displays.

1. Content Source: Choose Custom Content (a title and rich body), Saved Template (an Elementor template), or Remote URL (AJAX).
2. Title: The popup heading, shown above the body (Custom Content only). Supports dynamic tags.
3. Content: The WYSIWYG body of the popup — promote an offer, capture an email, or announce something new (Custom Content only).
4. Select Template: Type and select any saved Elementor template to render inside the popup (Saved Template only).
5. Remote URL: The HTML at this URL is fetched and injected when the popup opens (Remote URL only).

Configure the Trigger

The Trigger section decides how the popup opens.

1. Open On: Button Click, Page Load, After Delay, On Scroll, Exit Intent, Custom Selector, or Hash URL.
2. Delay (seconds): How long to wait before opening (After Delay trigger). Default is 3.
3. Scroll Distance (px) and Close When Scrolling Up: The scroll depth that opens the popup, and whether it closes again on upward scroll (On Scroll trigger).
4. Re-trigger Every Exit: Show the popup on every exit-intent event, or once per page view when off (Exit Intent trigger).
5. Selector: Any element matching this CSS selector opens the popup on click, e.g. .my-button, #open-popup (Custom Selector trigger).
6. Hash: Opens when the URL ends with this hash, e.g. #promo (Hash URL trigger).
7. Trigger Button: For the Button Click trigger, set the Button Text, Button Icon, and Alignment of the on-page button.
8. Sticky Reopen Button: Add a floating button (with custom text) that reopens the popup after it is closed — available with any trigger.

Configure Display Rules

The Display Rules section controls who sees the popup and when.

1. Show Once Per Visitor: Sets a cookie on close so the popup stays hidden. Pair with Hide For (days) to control how long (default 30).
2. Show After N Visits: 1 shows on the first visit; 2 skips the first and shows from the second visit onward, and so on.
3. Schedule: Enable a start and end date/time window during which the popup is allowed to appear.
4. Hide On URLs: One path per line — the popup is suppressed on any URL containing a listed path, e.g. /checkout or /cart.

Configure Behavior

The Behavior section governs how the popup closes and reacts.

1. Close On Overlay Click: Dismiss the popup when the visitor clicks the dark backdrop (on by default).
2. Close On ESC Key: Allow the Escape key to close the popup (on by default).
3. Draggable: Let visitors drag the popup panel around the screen.
4. Auto Close: Automatically close the popup after a set number of seconds (default 5).
5. Redirect On Close: Send the visitor to a Redirect URL when the popup is dismissed.
6. Close Button: Show or hide the close button, set its Position (Inside or Outside the panel), and its Alignment (Left or Right).

Configure Position & Motion

The Position & Motion section sets where the popup appears and how it animates in.

1. Position: Center, Top, Bottom, Left, Right, Top Left, Top Right, Bottom Left, or Bottom Right.
2. Entrance Animation: Fade In, Zoom In, Slide From Top/Bottom/Left/Right, Bounce In, Flip X, Flip Y, Rotate In, Flow In, or Unfold.
3. Animation Duration (s): The length of the entrance animation, from 0.1 to 3 seconds (default 0.4).
4. Animate Page Behind: Transform the rest of the page while the popup is open, then choose the Page Effect: Blur, Scale, Move Up, Move Down, Move Left, or Move Right.

Style Your Modal Popup

Use the Style tab to customise the popup panel, overlay, and trigger button.

1. Popup:
   Width, background color, padding, border radius, and box shadow for the panel. Title color and typography.
2. Overlay:
   Backdrop color and an optional backdrop blur (in px) for a frosted-glass effect behind the popup.
3. Trigger Button:
   Typography, plus Normal and Hover tabs for text color and background color, with padding and border radius (Button Click trigger only).

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page in a new browser tab and fire your chosen trigger to see the Modal Popup widget open. The popup does not auto-open inside the editor canvas, so always verify on the live preview.

Best Practices

1. Newsletter opt-in: Use the After Delay or Exit Intent trigger with Show Once Per Visitor so subscribers are not asked to sign up on every page view.
2. Age gate / consent: Use the Page Load trigger, turn off Close On Overlay Click and Close On ESC Key, and hide the close button so visitors must make a choice before continuing.
3. Video popup: Set Content Source to Saved Template containing a video widget, and open it with the Button Click or Custom Selector trigger for a lightbox-style player.
4. Announcements: Use the Schedule rule to run a limited-time sale popup automatically, and add Hide On URLs for /checkout and /cart so it never interrupts the purchase flow.
5. Keep offers reachable: Enable the Sticky Reopen Button so visitors who dismiss the popup can bring it back with one click.

Troubleshooting

1. Popup does not open in the editor: This is by design — auto-open triggers (load, delay, scroll, exit) are disabled inside the Elementor canvas so they don’t fire on every refresh. Test on the front-end preview instead.
2. Popup never appears on the front end: Check the Display Rules. Show Once Per Visitor sets a cookie, and Show After N Visits or an active Schedule may be suppressing it. Clear the cookie or open in a private window to re-test.
3. Custom Selector trigger does nothing: Verify the selector matches a real element on the page and is entered as a valid CSS selector (e.g. .my-button or #open-popup). The element must exist when the page loads.
4. Remote URL content is empty: The remote page must return HTML and allow being fetched from your site. Cross-origin restrictions on the remote server can block the AJAX request — host the content on the same domain when possible.

Frequently Asked Questions

Can I trigger the modal from a button or menu link?

Yes. Use the Custom Selector trigger and enter the CSS selector of any element — a menu item, an existing button, or an image. Any element matching the selector opens the popup on click, so you are not limited to the widget’s built-in Button Click trigger.

Can I load a saved template inside the modal?

Yes. Set Content Source to Saved Template and select any Elementor template. This lets you design the entire popup body — forms, videos, columns, buttons — visually in Elementor and reuse it across multiple popups.

Does the popup show only once per visitor?

Only if you enable Show Once Per Visitor in Display Rules, which sets a cookie on close and keeps the popup hidden for the number of days you specify. Without it, the popup follows its trigger every time the trigger fires. You can also use Show After N Visits to delay the first appearance.

Can I open the popup from a URL?

Yes. Use the Hash URL trigger and set a hash such as #promo. The popup opens whenever the page is loaded with that hash in the URL, which is ideal for links in emails or campaigns that should land visitors straight on the offer.

Can the popup redirect visitors after they close it?

Yes. Enable Redirect On Close in the Behavior section and set a Redirect URL. When the visitor dismisses the popup, they are sent to that URL — useful for guiding them to an offer, thank-you page, or checkout after an interaction.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Modal Popup widget:

• Offcanvas: Slide-in side panel for menus, filters, or carts — a companion to the centered Modal Popup.
• Iframe: Embed any external URL responsively — pair with a Saved Template to show iframe content inside a popup.
• Video Gallery: Build a lightbox video grid when you need multiple videos rather than a single popup.
• Social Share: Add share buttons inside your popup content to boost the reach of an announcement or offer.

Conclusion

The Modal Popup widget from Sky Addons turns popup building into a straightforward Elementor task — pick a trigger, choose a content source, layer on display rules, and style every detail from the panel. Whether you need a simple button-triggered offer, an exit-intent opt-in shown once per visitor, or a scheduled announcement that stays out of the checkout flow, everything is achievable without touching a line of code. If you have any questions or need help, visit the Sky Addons support center.