hystmodal v1.0.1

HystModal

Lightweight and flexible JavaScript modal library

Documentation | In Russian | README in Russian

Features.

• The size is 3 kB (gzip), doesn't need any dependencies. HystModal is written in pure JavaScript, does not require jQuery or other libraries to work
• Carefully designed UX for ease of use. Prevent scrolling of the background, three ways to close the window, scroll bar tracking, centering the modal.
• Full customizable by CSS. Styles of the modal window and background is completely determined in CSS. Based on Flexbox, modals can have any CSS transitions.
• Without changing the DOM of page Modal opening is performed only by CSS. All custom event listeners on elements inside the modal will not stop working.
• A11y and capture the focus. Designed with accessibility in mind and WAI-ARIA recommendations. When you opened the modal focus is captures inside.
• Works in Internet Explorer 11. Works without problems in IE11 and all modern browsers. Don't need any polyfills or transpiler.

Usage

1. Download and unpack the latest version of hystModal

2. Connect hystmodal.min.js and hystmodal.min.css from "dist" folder to the page:

   <link rel="stylesheet" href="hystmodal.min.css">
   <script src="hystmodal.min.js"></script>

3. Put the following markup in your HTML document:

   <div class="hystmodal" id="myModal" aria-hidden="true">
       <div class="hystmodal__wrap">
           <div class="hystmodal__window" role="dialog" aria-modal="true">
               <button data-hystclose class="hystmodal__close">Close</button>  
               <!-- You modal HTML markup -->
           </div>
       </div> 
   </div>

.hystmodal - Main selector of the modal. It must have a unique id attribure. This selector don't get focus when modal is closed, due CSS rules visbility:hidden. Attribute aria-hidden is switches automatically.

.hystmodal__wrap - scrolled area under the modal window. Due of settings, it can close modal window on click/tap. This selecor don't have background by default. Selector .hystmodal__shadow, which obscures the page content is added automatically directly before closing tag, when the script is loaded.

.hystmodal__window - Modal box. WAI-ARIA recommends adding attribute aria-labelledby with descriptions of the modal for better accessibility.

data-hystclose - selector with data-hystclose attribute is closing current modal window on mouse click, if this set on in configuration. This selector may contains in any place inside .hystmodal__window

4. Place following JS code for activating functionality of modals:

   const myModal = new HystModal({
       linkAttributeName: "data-hystmodal",
       //settings (optional). see Configuration
   });

5. Add attribute data-hystmodal on element that will be opening the modal window. Value of the attribute must be CSS selector (id or class name of the window). For example:

   <a href="#" data-hystmodal="#myModal">Open modal with id=myModal</a>

Title of data-attribute, which opening the modals, is defined by value of the property linkAttributeName of the configurations object.

6. If necessary, change the сonfiguration.

Configuration

Configuration example

const myModal = new HystModal({
    linkAttributeName: 'data-hystmodal',
    catchFocus: true,
    waitTransitions: true,
    closeOnEsc: false,
    beforeOpen: function(modal){
        console.log('Message before opening the modal');
        console.log(modal); //modal window object
    },
    afterClose: function(modal){
        console.log('Message after modal has closed');
        console.log(modal); //modal window object
    },
});

API

When creating an instance of a class HystModal by code new HystModal({ ... }), variable myModal will contain object, which contain properties and methods.

Properties

Methods