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.

#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“

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…