Lightweight Modal Window With Vanilla JavaScript And CSS/CSS3

Category: Javascript , Modal & Popup | September 4, 2016
Author: picitelli
Views Total: 1,531
Official Page: Go to website
Last Update: September 4, 2016
License: MIT

Preview:

Lightweight Modal Window With Vanilla JavaScript And CSS/CSS3

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();

 

  • Arun

    How to hide pop up on pressing ESC key and overlay div?