Cuadros emergentes personalizables en Vanilla JavaScript-PoppyPopup

Vista prévia

Descripción

PoppyPopup es un plugin de JavaScript Vanilla para crear ventanas emergentes personalizables, bastante agradables de alerta/confirmación/prompt para reemplazar los cuadros de diálogo de JavaScript normales.

Funcionamiento

Incluya los archivos JavaScript y CSS de PoppyPopup en la Página Web.

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

Cree cuadros emergentes personalizados con la siguiente sintaxis de JS.

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;}


})

Registro de cambios

12/15/2018

• Añadida la opción de ocultar el botón de cancelación en los prompts y confirma.

09/26/2018

• Bugfix