Modal Window

MyTravel uses third-party Custombox dialog plugin, so add dialogs to your site for lightboxes, user notifications, or completely custom content.

Official documentation

For more detailed information and examples, see the official documentation: Custombox .

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

FadeIn Slide Blur

Modal title

Modal body text goes here.

                      
                        <!-- 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 after some time

Modal body text goes here.

Open on scroll

Open on scroll

Modal body text goes here.

Open on target

Open on target

Modal body text goes here.

Open on hashlink

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

Preventing modal window close

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

Open modal window

Modal title

Modal body text goes here.

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

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.

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