Lightweight ES6 Modal Library – modal-vanilla-js

Category: Javascript , Modal & Popup | May 9, 2020
Author: antonrodin
Views Total: 936 views
Official Page: Go to website
Last Update: May 9, 2020
License: MIT


Lightweight ES6 Modal Library – modal-vanilla-js


A Vanilla JavaScript (ES6) modal library used to display the hidden web content in a responsive modal popup when triggered.

How to use it:

Import the modal.js and modal.css into the html document.

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

Create your own content to be displayed in the modal popup.

<div class="modal-azr" id="example">
  <div class="modal-azr-content">
    <span class="close-modal">&times;</span>
    <h1>Modal Title</h1>
    <p>Modal Content Here</p>

Show the modal.

const myModal = new Modal('example');;

Execute callback functions when the modal is opened or closed.

myModal.hide(function() {
}); {


v0.8.0 (05/09/2020)

  • Fix backdrop issue.


  • Set default button property type to “button”.

You Might Be Interested In:

Leave a Reply