Basics

Here's the guide on how to create a simple popup and open it by pressing a button.

The following HTML code creates the most basic popup with a close button. Probably the best place for this code is after the footer.

<div id="popup-basic" class="popup col-6 col-md-4">
  <button type="button" class="close" data-dismiss="popup" aria-label="Close">
    <span aria-hidden="true">×</span>
  </button>
  ...
</div>

Like a modal, you can toggle the popup from a button with data-toggle="popup" and data-target="#popup-id":

<button class="btn btn-primary" type="button" data-toggle="popup" data-target="#popup-basic">Open Popup</button>

As you might notice, you can specify a responsive width for your popup using the .col-* classes which is part of Bootstrap grid system. Also, you can set a fixed or percentage width using .w-* utility classes.

Modifiers

To give some sprits to your popups, iability to change position and animation would be awesome.

Position

The default position of the popups are bottom-right. To change this default value, simply add data-position to your .popup with one of the following values:
top-left | top-center | top-right | bottom-left | bottom-center | bottom-right

Animation

The default animation of the popup component is fade. You can change this default behavior by data-animation attribute which can accept one of the following valuse:
slide-up | slide-down | slide-left | slide-right

Options

Our popups has some useful options such as auto show in page load or exit show.

Autohide

You can set a deadline for appearance of your popup. Simply add data-autohide="5000" to your popup to hide it after five seconds. You can change it to any other integer.

Autoshow

A popup can be set to show once the page loads (like the one you saw on page load) with an optional delay time in milliseconds. For this purpose, simply add data-autoshow="5000" to your .popup element, so it'll display 5 seconds after the page load; like the one you saw in this page.

Exitshow

An exitshow popup is a popup that displays once the cursor left an element. For most cases, the element is <body> tag. To achieve this goal, simply add a data-exitshow="selector" to your popup element, which selector is a jQuery selector. For example, data-exitshow="body" will display your popup once the cursor leaves the <body> element. Also, you can have an optional data attribute of data-delay="1000" which add a delay in milliseconds before opening the popup.

To make it more understandable, we have an example here. Simply move your cursor inside the following block and then exit from the area to see a popup after 1 second.

Please note that to not disturb visitors, exitshow is a one-time event.

Once

An once popup is a popup that displays only one time to a user per browser. We use localStorage to store the data. So when a user see this kind of popup, he won't see it again unless he uses another browser or clear his localStorage.

To have such a popup, simply add data-once="key" to your popup which key is a string that we store in the localStorage to compare and figure out this popup has already displayed or not. You probably need to stop displaying the popup after clicking on a button (e.g. "Got it" button on cookie warning message). In this case, you need to add a data-once-button="true" to your desire button as well.