Modal Window
Space 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>
Copy-paste the following <script>
near the end of your pages under JS Space 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('.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.
<div class="js-modal-window d-block u-modal-window p-5">
<button class="btn btn-xs btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<h5>Modal title</h5>
<p>Modal body text goes here.</p>
<button type="button" class="btn btn-secondary" role="button" onclick="Custombox.modal.close();">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
Animation options
Check out all available modal options with animations.
<a class="btn btn-primary" href="#animationModal"
data-modal-target="#animationModal"
data-modal-effect="fadein">
FadeIn
</a>
<div id="animationModal" class="u-modal-window p-5" style="display: none;">
<button class="btn btn-xs btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<h4>Modal title</h4>
<p>Modal body text goes here.</p>
<button type="button" class="btn btn-secondary" role="button" onclick="Custombox.modal.close();">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
To use an animated option, copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of popups
$.HSCore.components.HSModalWindow.init('[data-modal-target]');
});
</script>
Situation options
Check out all available situation modal options.
<!-- 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-autonomous-popup u-modal-window p-5" style="display: none;"
data-modal-type="aftersometime"
data-open-effect="zoomIn"
data-close-effect="zoomOut"
data-delay="5000"
data-speed="500">
<button class="btn btn-xs btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<h4>Open after some time</h4>
<p>Modal body text goes here.</p>
<button type="button" class="btn btn-secondary" role="button" onclick="Custombox.modal.close();">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</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-autonomous-popup u-modal-window p-5" style="display: none;"
data-modal-type="onscroll"
data-open-effect="flipInY"
data-close-effect="flipOutY"
data-breakpoint="1000"
data-speed="500">
<button class="btn btn-xs btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<h4>Open on scroll</h4>
<p>Modal body text goes here.</p>
<button type="button" class="btn btn-secondary" role="button" onclick="Custombox.modal.close();">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</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-autonomous-popup u-modal-window p-5" style="display: none;"
data-modal-type="ontarget"
data-open-effect="flipInY"
data-close-effect="flipOutY"
data-target="#modal-anchor"
data-speed="500">
<button class="btn btn-xs btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<h4>Open on target</h4>
<p>Modal body text goes here.</p>
<button type="button" class="btn btn-secondary" role="button" onclick="Custombox.modal.close();">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- End On target Modal -->
<!-- Hashlink Modal -->
<a class="btn btn-primary mb-1" href="modal-window.html#hashlinkModal" target="_blank">
Open on hashlink
</a>
<div id="hashlinkModal" class="js-autonomous-popup u-modal-window p-5" style="display: none;"
data-modal-type="hashlink"
data-open-effect="flipInY"
data-close-effect="flipOutY"
data-speed="500">
<button class="btn btn-xs btn-icon btn-text-secondary u-modal-window__close" type="button" onclick="Custombox.modal.close();">
<span class="fas fa-times"></span>
</button>
<h4>Open on hashlink</h4>
<p>Modal body text goes here.</p>
<button type="button" class="btn btn-secondary" role="button" onclick="Custombox.modal.close();">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<!-- End Hashlink Modal -->
To use an situation modal option, 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('.js-autonomous-popup', {
autonomous: true
});
});
</script>
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:
|