Lite Modal JavaScript Library – modalite

Preview:

Description:

modalite is a simple, lightweight JavaScript library for creating responsive modal windows with CSS3 animations.

Installation:

npm install modalite

How to use it:

Insert the modalite’s stylesheet in the header of the document.

<link rel="stylesheet" href="modalite.css">

Insert the modalite’s JavaScript at the end of the document.

<script src="modalite.js"></script>

The HTML structure for the modal window.

<div id="modal-demo" class="modal" data-modal>
  <div class="modal-container">
    <div class="modal-close" data-close-modal></div>
    <div class="modal-content">
      <h1>Modal Content</h1>
      <p>More Content Here</p>
    </div>
  </div>
</div>

Create a trigger element to toggle the modal window.

<p data-open-modal="modal-demo">Trigger Element</p>