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

#popup-1

Basic Popup

#popup-2

Popup without close button

#popup-3

Modal Popup with alternative close button

#popup-4

Inverted close button color (for dark backgrounds)

#popup-5

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“