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>
  </div>
</div>

Show the modal.

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

Execute callback functions when the modal is opened or closed.

myModal.hide(function() {
  console.log("Hidden");
});
myModal.show(function() {
  console.log("Shown");
});

Changelog:

v0.8.0 (05/09/2020)

• Fix backdrop issue.

12/29/2018

• Set default button property type to “button”.