Simple Flexible Modal Library – Lite Modal

Category: Javascript , Modal & Popup | April 22, 2016
Author:DarylPinto
Views Total:1,648 views
Official Page:Go to website
Last Update:April 22, 2016
License:MIT

Preview:

Simple Flexible Modal Library – Lite Modal

Description:

Lite Modal is a simple, lightweight, flexible JavaScript library which allows you to present any html content in a responsive, cross-platform modal popup. Clicking anywhere on the blank area will dismiss the modal.

How to use it:

Put the minified version of Lite Modal into your html file.

<script src="lite-modal.min.js"></script>

Wrap your modal content into a container element with the CSS class of ‘lite-modal’.

<div class="lite-modal" id="example">
  <h1>Modal Title</h1>
  <p>Modal Content Here</p>
</div>

Open the modal.

liteModal.open('#demo')

Style the modal with your own CSS styles.

.lite-modal {
  padding: 40px;
  background-color: white;
  font-family: sans-serif;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  line-height: 1.6em;
}

You Might Be Interested In:


Leave a Reply