Minimal Alert Popup JavaScript Library – Ago-Popup.js

Category: Javascript , Modal & Popup | September 15, 2021
Author:EnesAgo
Views Total:158 views
Official Page:Go to website
Last Update:September 15, 2021
License:MIT

Preview:

Minimal Alert Popup JavaScript Library – Ago-Popup.js

Description:

A minimal clean alert popup library for vanilla JavaScript.

How to use it:

1. Import the Ago-Popup.js JavaScript library.

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

2. Add your own content to the popup.

<div class="popup" id="popup">
  <div class="popup-div">
    Any Content Here
  </div>
  <button class="popup-button" id="popup-button">close</button>
</div>

3. Create a button to trigger the popup.

<button id="open-popup">Launch</button>

4. Create an empty DIV element for the fullscreen background overlay.

<div id="overlay"></div>

5. Create a new popup instance.

const mypopup = new Popup('popup');

6. Enable the trigger button to launch the popup.

$id("open-popup").addEventListener("click", mypopup.Open);

7. Close the popup manually.

mypopup.Close

You Might Be Interested In:


Leave a Reply