Customizable Popup Boxes In Vanilla JavaScript – PoppyPopup

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