Create Modal Windows With Any Content – popop.js

Category: Javascript , Modal & Popup | January 27, 2022
Author:catcarbonell
Views Total:61 views
Official Page:Go to website
Last Update:January 27, 2022
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:

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

You Might Be Interested In:


Leave a Reply