Pretty Animated popup biblioteca JavaScript-x0popup

Vista prévia

Descripción

Simplemente otra biblioteca emergente de JavaScript que crea ventanas emergentes animadas, de buen aspecto y altamente personalizables para reemplazar la alerta nativa, confirmar, cuadros de diálogo de solicitud.

Funcionamiento

Descargue e incluya los archivos x0popup's JavaScript & StyleSheet en la página HTML.

<link href="dist/x0popup.min.css" rel="stylesheet">
<script src="dist/x0popup.min.js"></script>

Cree un cuadro emergente de ' información ' básico.

// x0p(title, text, type);
x0p('Message', 'Hello world!', 'info');

Cree un cuadro de diálogo de confirmación básico.

x0p('Confirmation', 'Are you sure?', 'warning');

Cree un cuadro de diálogo de solicitud con un campo de entrada.

x0p('Enter Your Name', null, 'input',

function(button, text) {



if(button == 'info') {





x0p('Congratulations',







 'Your name is ' + text + '!',







 'ok', false);



}



if(button == 'cancel') {





x0p('Canceled',







 'You canceled input.',







'error', false);



}

});

Valid API methods:

x0p(title, text, type, callback);
x0p(title, text, type, overlayAnimation);
x0popup({parameters}, callback);

Todos los parámetros disponibles.

x0popup({


// title

title: 'Message',


// custom text

text: null,


// custom theme

theme: 'default',


// shows background overlay

overlay: true,


// height / width

width: '90%',

height: '50%',

maxWidth: '450px',

maxHeight: '200px',


// text, input, ok, warning, info, error

type: 'text',


// custom icon

icon: null,


// icon url

iconURL: null,


// text, password

inputType: null,


// Default value in the input.

inputValue: null,


// input placeholder

inputPlaceholder: null,


// input color

inputColor: null,


//
Parameters: button, value.

// Return a string implies there exists an error.

 // If the value passed validation, just return null.

 // Notice: cancel button will not trigger this function.

inputValidator: null,


// shows cancel button

showCancelButton: null,


// array of single buttons.

buttons: null,


// auto close after x ms

autoClose: null,


// If false, html tags will be encoded before adding to the popup.

html: false,


// enable animation

animation: true,


// pop, slideUp, slideDown, fadeIn

animationType: 'pop',


// show several popups with overlay continuously

overlayAnimation: true


}, callback);