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

Result
HTML

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

Result
HTML

FadeIn Slide Blur

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

Result
HTML

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

Preventing modal window close

Prevent modal window closing when clicking outside or pressing ESC keyboard button.

Result
HTML

Open modal window

                      
                        <a class="btn btn-primary mb-1" href="#preventModalClose"
                           data-modal-target="#preventModalClose"
                           data-modal-is-closing-by-esc="false"
                           data-modal-is-closing-by-overlay="false">
                          Open modal window
                        </a>

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.
`data-modal-is-closing-by-esc`	If `data-modal-is-closing-by-esc=""` is set to `false`, it prevents modal window closing when clicking outside or pressing ESC keyboard button. By default it's set to `true`.
`data-modal-is-closing-by-overlay`	If `data-modal-is-closing-by-overlay=""` is set to `false`, it prevents modal window closing when clicking outside or pressing ESC keyboard button. By default it's set to `true`.

Modal Window

How to use?

Basic example

Animation options

Situation options

Preventing modal window close

JavaScript behavior

Methods