Simple Flexible Modal Library – Lite Modal

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