Create Modal Windows With Any Content – popop.js

Category: Javascript , Modal & Popup | August 8, 2020
Author:catcarbonell
Views Total:34 views
Official Page:Go to website
Last Update:August 8, 2020
License:MIT

Preview:

Create Modal Windows With Any Content – popop.js

Description:

A super tiny JavaScript popup library to simplify the creation of modal windows with any inline content you define.

Built with Vanilla JavaScript, CSS flexbox and CSS transitions.

How to use it:

1. Add the popup.css and popup.js to the page.

<link rel="stylesheet" href="css/popop.css" />
<script defer src="js/popop.js"></script>

2. Create the modal content with a close button as follows:

<div class="popop-modal" id="example">
  <div class="popop-content">
    Modal Content Here
  <div class="popop-fixed">
    <button class="popop-close-btn button">Close</button>
  </div>
</div>

3. Create a trigger button to launch the modal. That’s it.

<button class="popop-open-btn" data-modal-id="example">Launch</button>

Changelog:

08/08/2020

  • Removed extra semicolon on line 7

05/16/2020

  • Added focus to modal child element

You Might Be Interested In:


Leave a Reply