Lightweight and Flexible JavaScript Modal Window Library | hystModal

hystModal modal is a straightforward, light-weight, versatile, and accessible modal window plugin written in pure JavaScript.

More Features:

  • Size 3 KB (gzip), does not require any dependencies.
  • UX is carefully designed for ease of use.
  • Fully customizable by CSS.
  • Without changing the DOM for the page.
  • A11y and capture focus.
  • It works in Internet Explorer 11.

How to make use of it:

1. Insert each ihmodals.css and JavaScript ihmodals.js into the doc.

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

2. Create the modal window within the doc.

<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 set of elements to toggle the modal.

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

4. Initialize the modal library and finished it.

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

5. Apply your individual CSS types 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 potential 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,

      // callback functions
      beforeOpen: function () { },
      afterClose: function () { }
      
});

7. API strategies.

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

// close the modal window
myModal.close();

Lightweight And Flexible Modal Window In Pure JavaScript, Bootstrap Modal Window


See Demo And Download

Official Website(AddMoreScripts): Click Here

This superior jQuery/javascript plugin is developed by AddMoreScripts. For extra Advanced Usages, please go to the official website.

Leave a Comment