Skip to main content

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.

FadeIn Slide Blur 
            
              <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.

Open after some time Open on scroll Open on target Open on hashlink 
              
                <!-- 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>

JavaScript behavior

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

data-modal-target

 The ID of the called modal window.

data-effect

 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:
  • aftersometime
  • onscroll
  • ontarget
  • beforeunload
List of available effects:
  • fadein
  • slide
  • blur

data-modal-effect

 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:
  • fadein
  • slide
  • blur

data-open-effect

 Used if the effect of opening a modal window is taken from the library animate.css.

data-close-effect

 Used if the effect of opening a modal window is taken from the library animate.css.

data-overlay-color

 overlay color of the modal window.

data-overlay-opacity

 Opacity color of the modal window's overlay.

data-speed

 Speed of the opening modal window.

data-modal-delay

 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.

data-breakpoint

 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.

data-modal-type

 Modal window type. Valid values are:
  • aftersometime - opens a modal window after the specified time specified in the attribute data-delay
  • onscroll - opens a modal window if the distance from the top of the page is equal to the value of the attribute data-breakpoint
  • ontarget - opens modal when the block specified in the data-target gets into the viewport
  • hashlink - opens a modal window in new page
  • beforeunload - opens a modal window when the user moves the cursor away from the viewport.