Change Togather

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

Get Started


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>

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.


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


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


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


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


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.


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.