Buttons
Change Togather

Provide contextual feedback messages for typical user actions with the handful
of available and flexible alert messages.

Get Started
Watch
INTRO VIDEO

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.

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.