Lightweight And Flexible Modal Window In Pure JavaScript – hystModal

Preview:

Description:

hystModal is a simple, lightweight, flexible, and accessible modal window plugin written in pure JavaScript.

More Features:

• WAI-ARIA compliant.
• Easy to style using CSS.
• Supports most modern browsers.
• Loads modal content from inline elements.
• Smooth transition effects.

How to use it:

1. Insert both ihmodals.css and JavaScript ihmodals.js into the document.

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

2. Create the modal window in the document.

<div class="hystmodal hystmodal--simple" id="modalSimple" aria-hidden="true">
  <div class="hystmodal__wrap">
    <div class="hystmodal__window" role="dialog" aria-modal="true">
      <button class="hystmodal__close" data-hystclose>Close</button>
      <div class="hystmodal__styled">
        Modal Body Here
      </div>
    </div>
  </div>
</div>

3. Create a trigger element to toggle the modal.

<button class="button" data-hystmodal="#modalSimple">Simple Modal</button>

4. Initialize the modal library and done.

const myModal = new HystModal.modal({
      linkAttributeName: 'data-hystmodal'
      // more options here
});

5. Apply your own CSS styles to the modal.

.hystmodal--simple .hystmodal__window{
  position: relative;
  overflow: visible;
  border-radius: 4px;
  padding: 30px 30px;
}
.hystmodal--simple .hystmodal__close{
  position: absolute;
  z-index: 10;
  top:0;
  right: -40px;
  display: block;
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  border: none;
  font-size: 0;
  cursor: pointer;
}
*:focus {
  outline: 2px dotted #afb3b9;
  outline-offset:2px;
}
@media all and (max-width:767px){
  .hystmodal--simple .hystmodal__close{
    top:10px;
    right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23111' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23111' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");
  }
  .hystmodal--simple .hystmodal__window{
    margin: 0;
  }
}

6. All possible options with default values.

const myModal = new HystModal.modal({
      // enable/disable body scroll when the modal is activated
      backscroll: : true,
      // data attribute of trigger element
      linkAttributeName: : "",
      // close the modal by clicking on the overlay
      closeOnOverlay: true,
      // close the modal by pressing on the ESC key
      closeOnEsc: true,
      // close the modal by clicking on the close button
      closeOnButton: true,
      // close the modal after the CSS transition is finished
      waitTransitions: false,
      // focus on the active elements after the modal opened
      catchFocus: true,
      // contains a css selector that adds an margin-right equal to the width of the scroll bar when opening a modal window
      // useful for fixed elements on a page to avoid shifting them when opening a window
      // works only if the property backscroll:true
      fixedSelectors: "*[data-hystfixed]",
      // callback functions
      beforeOpen: function () { },
      afterClose: function () { }
      
});

7. API methods.

// open a modal window
myModal.open(selector);
// close the modal window
myModal.close();

Changelog:

03/15/20223

• Bugfix

v1.0.0beta (02/11/2023)

• Bugfix

v0.5 (03/30/2022)

• Bugfix

10/30/2020

• Add “fixedSelectors” propperty
• Fix Shift+Tab focus bug

08/30/2020

• v0.2.0