Author: | legomolina |
---|---|
Views Total: | 984 views |
Official Page: | Go to website |
Last Update: | February 15, 2020 |
License: | MIT |
Preview:

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
How can I make these pop-up automatically, after the page has loaded, please?