Lightweight Modal Window With Vanilla JavaScript And CSS/CSS3 – js-modal

Preview:

Description:

Just another vanilla JavaScript library for showing an animated responsive modal window on the webpage.  Modal open/close animations based on CSS3 transitions and transforms. It allows to load any html blocks within the document into the modal window.

How to use it:

Load the style sheet modal.css and JavaScript modal.js in the html document.

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

The basic html structure for the modal window.

<div class="modal modal--scale-up" id="modal">
  <div class="modal__window">
    <button class="modal__close-btn" type="button" data-close-modal>
      <svg class="modal__close-icon">
        <use xlink:href="#icon-close"></use>
      </svg>
    </button>
     <div class="modal__header">
        <h2 class="modal__title">Modal Title</h2>
      </div>
      <div class="modal__content">
        <p>Modal Content</p>
        <button class="btn" type="button" data-close-modal>Close Modal</button>
      </div>
  </div>
</div>

Create a button to launch the modal window.

<button class="btn" type="button" data-trigger-modal="modal">Trigger modal</button>

Insert a SVG based close icon to the modal window.

<div class="svgs" style="display: none;">
  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon-close" viewBox="0 0 16.196 16.197">
      <title>Close</title>
      <path d="M15.615,3.07c0.619-0.62,0.77-1.618,0.258-2.329c-0.652-0.906-1.924-0.981-2.679-0.226L8.627,5.084 c-0.292,0.292-0.765,0.292-1.057,0L3.069,0.582c-0.62-0.62-1.617-0.771-2.328-0.258C-0.165,0.976-0.24,2.248,0.516,3.003 l4.567,4.569c0.292,0.292,0.292,0.765,0,1.057l-4.501,4.503c-0.619,0.619-0.771,1.617-0.259,2.328 c0.652,0.902,1.924,0.976,2.679,0.226l4.568-4.569c0.291-0.291,0.765-0.291,1.057,0l4.501,4.503 c0.619,0.626,1.616,0.772,2.327,0.259c0.906-0.652,0.981-1.924,0.227-2.68l-4.568-4.569c-0.291-.292-0.291-0.765,0-1.057 L15.615,3.07z"></path>
    </symbol>
  </svg>
</div>

The JavaScript to initialize the modal window.

var modalEl = document.getElementById('modal');
var modalInst = new Modal(modalEl, {
    // options and callbacks here
});
modalInst.init();

Default options and callback functions.

new Modal(modalEl, {
    // active class set to modal when it opens
    activeClass: 'modal--active', 
    // active class set to body when modal opens
    bodyClass: 'modal-is-active', 
    // adds overlay to modal
    overlay: true, 
    // class for overlay of modal
    overlayClass: 'modal__overlay', 
    // callback for when modal opens
    openCallback: null, 
    // callack for when modal closes
    closeCallback: null 
});

API methods.

// open the modal
modalInst.openModal();
// close the modal
modalInst.closeModal();