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.

29 ноября

Ваш E-Mail в безопасности

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.

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.

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«

In this demo you will find Code-Modules inside the Popups with some advanced code — they use the JS API to customize the Popup behavior.

There is a Code Module in the right column —>

Check its contents to see how this popup is triggered after a 3 second delay.

There is a Code Module in the right column —>

Check its contents to see how this popup is triggered once you scroll down 50 Pixel.

Some text so you can scroll down…