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