Simple personalizable modal Dialog JavaScript plugin-popupmodal. js

Vista prévia

Descripción

popupmodal. js es un plugin de JavaScript vainilla que le ayuda a crear ventanas emergentes de diálogo modal adaptables y personalizables con facilidad. Una alternativa Greate a las casillas emergentes predeterminadas de JavaScript como alertas, confirmar y ventanas emergentes de diálogo rápido.

Funcionamiento

Para empezar, debe cargar el popupmodal. CSS y popupmodal-min. js en el proyecto.

// CSS
<link rel="stylesheet" href="css/popupmodal.css" >

// JS
<script src="js/popupmodal-min.js">></script>

Y luego adjunte su elemento deseado con un detector de eventos de clic.

document.getElementById('your-element').addEventListener('click', function()){

popup.alert(......); // alert dialog
}

Hay 3 tipos de popups de diálogo modal emergente:

// Alert
popup.alert( { content : .... } );

// Confirm
popup.confirm( { content : .... } );

// Prompt
popup.prompt( { content : .... } );

Opciones disponibles.

// The content to be shown in the popup modal. DOM element is acceptable too. Popup modal will not be shown if there is no content.
content : null


// To enable 'enter' and 'esc' key on 'Ok' and 'Cancel' button respectively.
keyboard : true


// Configure the maximum number of character allowed.
input_length : 99


// A placeholder for text box.
placeholder : ""


// Configure the popup modal default button's text.
// Note : Default buttons for alert is 'ok'. For confirm and prompt is 'ok' and 'cancel'.
default_btns : null


// Add extra buttons to the popup modal.

 // Note : Do checkout the next section on how to implement the button's callback function.
custom_btns : null


// Popup modal's button alignment, either 'left' or 'right'.
btn_align : 'left'


// The popup modal size. There are 'small', 'medium' and 'large'. Numbers are allowed as well, but without the 'px'. eg : 200.
modal_size : 'small'


// The overlay background color of the popup modal.
bg_overlay_color : '#000'


// The effect when the popup modal is shown. Slide from 'top', 'bottom', 'left' or 'right'. 'none' for no effect.
effect : 'top'

Registro de cambios

08/07/2018

• Corrección menor