Lite Modal JavaScript Library – modalite

Category: Javascript , Modal & Popup | July 27, 2017
Author: hdodov
Views Total: 1,501
Official Page: Go to website
Last Update: July 27, 2017
License: MIT

Preview:

Lite Modal JavaScript Library – modalite

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>

You Might Be Interested In:


Leave a Reply