Demo 1 – Introduction
Check the next two sections to see how a Popup works.
- The first section (with the blue-ish background) is the Popup.
- The second section (with the yellow-ish background) contains a button that triggers the popup.
Investigate this Section and see the details in the “Advanced” tab: The CSS ID and CSS Class
Below is a button with the URL set to #demo1. This URL triggers the Popup.
Edit the Module Settings of the button to see the URL in the “Link” section.
Demo 2 – Introduction
- Below you find a yellow-ish section with a list of Popup triggers. Each trigger displays the ID of the Popup that is opened.
- Inspect the Popups below to see how they are created.
Popup without close button
Modal Popup with alternative close button
Inverted close button color (for dark backgrounds)
No button trigger. This Popup is displyed on exit-intent.
This is the most basic Popup variant.
The section only has the CSS ID “popup-1” and the CSS Class “popup“
This Popup has no close button.
Close it by clicking on the background or pressing ESC.
The section has the CSS ID “popup-2” and the CSS Class “popup no-close“
This Popup has an alternate close button and is modal.
Background clicks are ignored.
Close it via ESC or the close button.
The section has the CSS ID “popup-3” and the CSS Class “popup close-alt is-modal“
This Popup has an inverted close button color, for dark backgrounds.
The section has the CSS ID “popup-4” and the CSS Class “popup dark“
This Popup is displayed, because an exit-intent was detected.
The section has the CSS ID “popup-5” and the CSS Class “popup on-exit“