Easy Inline Modal Window – simple-popup

Preview:

Description:

A simple plain JavaScript modal popup library to place your inline content in an overlay that covers the whole page.

How to use it:

1. Put simple-popup.js and simple-popup.css in the HTML page.

<link rel="stylesheet" href="simple-popup.css" />
<script src="simple-popup.js"></script>

2. Assign a unique ID to your modal content.

<div class="sp-source" id="example">
  Modal Content
</div>

3. Create a trigger element pointing to the modal.

<a href="#" class="sp-trigger" data-target="example">
  Launch The Modal Popup
</a>

4. Initialize the simple popup and done.

SimplePopup.init({
  // options here
});

5. Set the max width of the modal.

SimplePopup.init({
  maxWidth: '400px'
});

6. Display a close button in the modal.

SimplePopup.init({
  closeButton: true
});

7. Enable & config the open/close animation.

SimplePopup.init({
  duration: '200',
  animation: true
});