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
<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.
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:
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:
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.