Easy Inline Modal Window – simple-popup

Category: Javascript , Modal & Popup | March 24, 2020
Author: jhanxtreme
Views Total: 390 views
Official Page: Go to website
Last Update: March 24, 2020
License: MIT


Easy Inline Modal Window – simple-popup


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

3. Create a trigger element pointing to the modal.

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

4. Initialize the simple popup and done.

  // options here

5. Set the max width of the modal.

  maxWidth: '400px'

6. Display a close button in the modal.

  closeButton: true

7. Enable & config the open/close animation.

  duration: '200',
  animation: true

You Might Be Interested In:

Leave a Reply