Lightweight ES6 Modal Library – modal-vanilla-js

Category: Javascript , Modal & Popup | November 23, 2018
Author: antonrodin
Views Total: 88
Official Page: Go to website
Last Update: November 23, 2018
License: MIT

Preview:

Lightweight ES6 Modal Library – modal-vanilla-js

Description:

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");
});

You Might Be Interested In:

Leave a Reply