Componente de diálogo altamente personalizable-dmuka. Popup

Vista prévia

Descripción

dmuka. Popup es un componente de diálogo de JavaScript ligero para mostrar popups de diálogo modal-como modales personalizables en la Página Web.

Funcionamiento

Incluya los principales archivos JavaScript y CSS en la página.

<link rel="stylesheet" href="main.css">
<script src="main.js"></script>

Incluya un tema de su elección en la página.

<link rel="stylesheet" href="theme-blue.css">
<link rel="stylesheet" href="theme-dark.css">
<link rel="stylesheet" href="theme-gray.css">
<link rel="stylesheet" href="theme-green.css">
<link rel="stylesheet" href="theme-yellow.css">
<link rel="stylesheet" href="theme-red.css">

Crea un nuevo dmuka. Instancia emergente y personalice el cuadro de diálogo con las siguientes opciones.

new dmuka.Popup({



// parent container


// default: the whole body


parent: document.body,



// theme name


theme: "",



// additional class(es)


classes: "",



// trigger dispose function when the dialog closed


autoDisposeOnClose: true,



// width/height of the dialog


width: "50%",


height: "50%",



// specify the position of the dialog


positionX: "center",


positionY: "middle",





window: {



classes: "" // CSS class(es) for the dialog


},



// CSS class(es) for the dialog header


header: {



classes: "",
// CSS class(es) for the dialog header



text: "", // header text



enable: true // enable/disable the dialog header


}



content: {



classes: "", // CSS class(es) for the dialog content



htmlOrChild: "" // dialog content


},



footer: {



classes: "", // CSS class(es) for the dialog footer



buttons: [ ], // custom buttons



enable: true
// enable/disable the dialog footer


},



closeButton: {



classes: "", // CSS class(es) for the close button


}



})

Abra el cuadro de diálogo.

instance.open()

Funciones de devolución de llamada.

new dmuka.Popup({



onLoad: function () {




// this = popup





var popupContent = this.DOM.content.get();




console.log(popupContent, "My Content - onLoad");


},


onOpen: function () {




// this = popup





var popupContent = this.DOM.content.get();




console.log(popupContent, "My Content - onOpen");




console.log("Trigger open event");


},


onClose: function () {




// this = popup





var popupContent = this.DOM.content.get();




console.log(popupContent, "My Content - onClose");




console.log("Trigger close event");


},


onSubmitFooter: function (id) {




// this = popup





var popupContent = this.DOM.content.get();




console.log(popupContent, "My Content - onSubmitFooter");





var footerButtonId = id;




console.log("Clicked : " + footerButtonId + " ID Button");


}
})

More API methods.

// close the dialog
instance.close()

// clean the data
instance.dispose()