Customizable Popup Boxes In Vanilla JavaScript – PoppyPopup

Category: Javascript , Modal & Popup | December 15, 2018
Author: legomolina
Views Total: 2,007
Official Page: Go to website
Last Update: December 15, 2018
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:

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