Customizable Popup Boxes In Vanilla JavaScript – PoppyPopup

Category: Javascript , Modal & Popup | February 15, 2020
Author:legomolina
Views Total:1,015 views
Official Page:Go to website
Last Update:February 15, 2020
License:MIT

Preview:

Customizable Popup Boxes In Vanilla JavaScript – PoppyPopup

Description:

PoppyPopup is a vanilla JavaScript plugin for creating customizable, pretty nice alert/confirmation/prompt popups to replace the regular JavaScript dialog boxes.

How to use it:

Include the PoppyPopup’s JavaScript and CSS files on the webpage.

<link rel="stylesheet" href="styles/css/style.css">
<script src="scripts/PoppyPopup.js"></script>

Create custom popup boxes using the following JS syntax.

PoppyPopup.alert('Hi, this is a PopUp!', 'With title!')"
PoppyPopup.confirm('Hi, this is a PopUp!', 'Confirm')"
PoppyPopup.prompt('Type your name', 'User control', {}, function(value) {
  PoppyPopup.alert('Welcome ' + value);
})"

Available options.

PoppyPopup.alert('Hi, this is a PopUp!', 'With title!', {
  // shows background overlay
  showBackground: true,
  // the popup will be removed from the DOM when its closed, otherwise, the popup just disappears but it stays on the DOM
  removeWhenClose: true,
  // width
  width: 400 + "px",
  // sets if Enter and Esc keys should work. Enter to accept and Esc to cancel
  keyboardSupport: true, 
  // sets if cancel button should be present on prompt and confirm popups
  cancelButton: true,
  // the value the input will contain (just prompt)
  valueText: '',
  // the placeholder the input will contain (just prompt) 
  placeholderText: '',
  // callbacks
  accept: function() {return true;},
  cancel: function() {return false;}
  
})

Changelog:

02/15/2020

  • Fixed cancel button not appearing

12/15/2018

  • Added option to hide cancel button on prompts and confirms.

09/26/2018

  • Bugfix

You Might Be Interested In:


One thought on “Customizable Popup Boxes In Vanilla JavaScript – PoppyPopup

  1. Hamsun

    How can I make these pop-up automatically, after the page has loaded, please?

    Reply

Leave a Reply