Create Modal Windows With Any Content – popop.js

Preview:

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:

01/27/2022

• moved close button to the top right

08/08/2020

• Removed extra semicolon on line 7

05/16/2020

• Added focus to modal child element