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.
Popup
Investigate this Section and see the details in the „Advanced“ tab: The CSS ID and CSS Class
Trigger
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.
Triggers
Basic Popup
Popup without close button
Modal Popup with alternative close button
Inverted close button color (for dark backgrounds)
#popup-5
No button trigger. This Popup is displyed on exit-intent.
Popup 1
This is the most basic Popup variant.
The section only has the CSS ID „popup-1“ and the CSS Class „popup„
Popup 2
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„
Popup 3
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„
Popup 4
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„
Popup 5
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„
