Lightweight ES6 Modal Library – modal-vanilla-js

Category: Javascript , Modal & Popup | December 29, 2018
Author: antonrodin
Views Total: 714
Official Page: Go to website
Last Update: December 29, 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");
});

Changelog:

12/29/2018

  • Set default button property type to “button”.

You Might Be Interested In:


Leave a Reply