Modal Window
Front uses third-party Custombox dialog plugin, so add dialogs to your site for lightboxes, user notifications, or completely custom content.
How to use?
Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.modal-window.js plugin.
Copy-paste the stylesheets <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/custombox/dist/custombox.min.css">
<link rel="stylesheet" href="../../assets/vendor/animate.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/custombox/dist/custombox.min.js"></script>
<script src="../../assets/vendor/custombox/dist/custombox.legacy.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/components/hs.modal-window.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of autonomous popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]', '.js-modal-window', {
autonomous: true
});
</script>
Load animate.css after custom.css file.
custombox.css includes its custom animations, and some of them are different than animate.css. Therefore, it is advised to load animate.css file after custombox.css.
Basic example
Below is a static modal example (meaning its display have been overridden).
Modal title
Modal body text goes here.
<!-- Modal -->
<div id="basicExampleModal" class="js-modal-window u-modal-window" style="width: 500px;">
<div class="card">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Modal title</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<!-- Body -->
<div class="card-body p-5">
<p>Modal body text goes here.</p>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Changes</button>
<button type="button" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Close</button>
</div>
<!-- End Footer -->
</div>
</div>
<!-- End Modal -->
Animation options
Check out all available modal options with animations.
<!-- Modal -->
<div id="animationModal" class="js-modal-window u-modal-window" style="width: 500px;">
<div class="card">
<!-- Header -->
<header class="card-header bg-light py-3 px-5">
<div class="d-flex justify-content-between align-items-center">
<h3 class="h6 mb-0">Modal title</h3>
<button type="button" class="close" aria-label="Close" onclick="Custombox.modal.close();">
<span aria-hidden="true">×</span>
</button>
</div>
</header>
<!-- End Header -->
<!-- Body -->
<div class="card-body p-5">
<p>Modal body text goes here.</p>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="card-footer d-flex justify-content-end">
<button type="button" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save Changes</button>
<button type="button" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Close</button>
</div>
<!-- End Footer -->
</div>
</div>
<!-- End Modal -->
Situation options
Check out all available situation modal options.
Open after some time
Open on scroll
Open on target
Open on hashlink
Open after some time
Modal body text goes here.
Open on scroll
Modal body text goes here.
Open on target
Modal body text goes here.
Open on hashlink
Modal body text goes here.
<!-- After Some Time Modal -->
<a class="btn btn-primary mb-1" href="#aftersometimeModal"
data-modal-target="#aftersometimeModal"
data-modal-effect="fadein">
Open after some time
</a>
<div id="aftersometimeModal" class="js-modal-window u-modal-window" style="width: 500px;"
data-modal-type="aftersometime"
data-open-effect="zoomIn"
data-close-effect="zoomOut"
data-breakpoint="1000"
data-speed="500">
</div>
<!-- End After Some Time Modal -->
<!-- On Scroll Modal -->
<a class="btn btn-primary mb-1" href="#onscrollModal"
data-modal-target="#onscrollModal"
data-modal-effect="fadein">
Open on scroll
</a>
<div id="onscrollModal" class="js-modal-window u-modal-window" style="width: 500px;"
data-modal-type="onscroll"
data-open-effect="zoomIn"
data-close-effect="zoomOut"
data-target="#modal-anchor"
data-speed="500">
</div>
<!-- End On Scroll Modal -->
<!-- On Target Modal -->
<a class="btn btn-primary mb-1" href="#ontargetModal"
data-modal-target="#ontargetModal"
data-modal-effect="fadein">
Open on target
</a>
<div id="ontargetModal" class="js-modal-window u-modal-window" style="width: 500px;"
data-modal-type="ontarget"
data-open-effect="zoomIn"
data-close-effect="zoomOut"
data-speed="500">
</div>
<!-- End On Target Modal -->
<!-- Hashlink Modal -->
<a class="btn btn-primary mb-1" href="#hashlinkModal"
data-modal-target="#hashlinkModal"
data-modal-effect="fadein">
Open on hashlink
</a>
<div id="hashlinkModal" class="js-modal-window u-modal-window" style="width: 500px;"
data-modal-type="hashlink"
data-open-effect="zoomIn"
data-close-effect="zoomOut"
data-speed="500">
</div>
<!-- End Hashlink Modal -->
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-modal-target="".
| Attributes | Description |
|---|---|
|
|
The ID of the called modal window. |
|
|
Use if you want to use the built-in effects. The attribute is given only to the modal window, not the links through which it is called. This attribute is required if the one of the below given functions are used:
|
|
|
Use if you want to use the built-in effects. The attribute is given to a link through which the modal window is called.
List of available effects:
|
|
|
Used if the effect of opening a modal window is taken from the library animate.css. |
|
|
Used if the effect of opening a modal window is taken from the library animate.css. |
|
|
overlay color of the modal window. |
|
|
Opacity color of the modal window's overlay. |
|
|
Speed of the opening modal window. |
|
|
Delays the opening of the modal window for the time specified in the attribute, after the block specified in the data-target gets into the viewport. |
|
|
If data-modal-type="" is set to onscroll, it opens a modal window if the distance from the top of the page is equal to the value of the attribute. |
|
|
Modal window type. Valid values are:
|