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.

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«