The Modal Popup widget allows you to display content in a popup overlay without leaving the current page. It's ideal for showcasing images, videos, forms, announcements, or custom HTML in a focused, attention-grabbing way.
The popup can be triggered by user actions like clicking a button, image, or link, and can contain various content types including saved templates. This makes it a versatile tool for promotions, lead capture, and presenting additional information without disrupting the browsing experience.
Content#
- Popup Preview: Toggle to preview the modal popup directly while editing. When enabled, the popup will open in the editor to let you see the current design and content setup.
- Type: Determines the content source for the modal popup. Available options include:
- Image – Displays an image inside the popup.
- Link (Video/Map/Page) – Embeds media or a webpage link such as YouTube/Vimeo videos, Google Maps, or any web page.
- Content – Allows you to add custom text, images, or shortcodes directly.
- Saved Templates – Loads pre-designed Elementor templates inside the popup.
- Custom HTML – Lets you insert raw HTML code for complete customization.
Some options will appear based on the type you choose.
Triggers#
- On Page Load: Opens the popup automatically after the page loads.
- Delay – Set a Delay (in seconds) before it appears.
- On Scroll: Triggers the popup when the user scrolls the page.
- Scroll Direction – Choose Up or Down.
- Scroll Offset (%) – Show the popup after the user scrolls a certain percentage of the page.
- On Scroll To: Opens the popup when the user scrolls to a specific element on the page.
- Element Selector – Provide the CSS class (prefixed with dot) or ID (prefixed with hash) of the element. Example: .my-class or #my-element
- On Click: Displays the popup when a user clicks on a specified element.
- Element Selector – Provide the CSS class (prefixed with dot) or ID (prefixed with hash) of the element. Example: .my-class or #my-element
- On URL Parameter: Opens the popup if a specific URL parameter is detected.
- Parameter Name – Provide a parameter name that can be used to trigger the popup via URL.
- Parameter Value (optional) – Provide a value for the parameter. So when the value matches in the URL, popup will trigger.
- On User Inactivity: Shows the popup after the user has been inactive for a set duration (in seconds).
- On Page Exit Intent: Displays the popup when the user is about to leave the page.
Re-trigger#
- Re-trigger after these days: Defines how many days to wait before showing the popup again after it’s closed. (Not applicable for the "On Click" trigger.)
Conditions#
Fine-tune how often and under what circumstances a modal popup should appear.
- Trigger after X page views: When enabled, you can specify the number of page views a visitor must complete before the modal popup is displayed. Useful if you only want to show the popup to visitors after they’ve engaged with the site a certain amount.
- Trigger Up to X Times: When enabled, you can set a limit for how many times the popup should appear for a visitor. Example: Show the popup only 2 times total, regardless of how many times they visit the site.
- Reset when re-trigger: When enabled, it resets the popup’s display counter when the Re-Trigger option is active. This means after a defined number of days or conditions, the popup can be shown again even if it had previously reached its display limit.
Close Button#
- Show Close Button: Enable or disable the close button on the modal. If set to Yes, the close button will be displayed; if set to No, the modal won’t show a close button, and users will need another way to exit the modal.
- Icon: Lets you choose or upload the icon used for the close button.
- ARIA Label: This improves accessibility by providing screen readers with descriptive text, e.g., "Close modal" so visually impaired users understand its function.
Advanced#
- Show Close Button after (seconds): Lets you delay the appearance of the close button. Useful if you want users to view content for a certain time before being able to close the modal.
- Automatically close after (seconds): Sets a timer to auto-close the modal after the specified number of seconds. Helpful for announcements or time-sensitive notices.
- Prevent closing on clicking outside: Control whether clicking outside the modal (on the overlay/background) should close it.
- Prevent closing on ESC key press: Disable the modal from being closed when the user presses the Escape (ESC) key.
- Disable page scrolling: Disable background page scrolling while the modal is open.
- Hide for logged in users: Prevent the modal from being displayed to logged-in users. Useful for showing promotions, opt-ins, or announcements only to new visitors or guests.