Biblioteca de JavaScript modal Dialog personalizable-simple-modal. js

Vista prévia

Descripción

Una biblioteca modal de JavaScript simple, flexible y personalizable para crear una variedad de cuadros de diálogo de & modal de una manera elegante.

Funcionamiento

Primero debe cargar la hoja de estilos simple-modal. CSS y JavaScript simple-modal. js en su página web.

<link href="src/simple-modal.css" rel="stylesheet">
<script src="src/simple-modal.js"></script>

Cree una ventana modal básica.

var modal1 = new SimpleModal({


title: 'Simple Modal',


body: '<p>This is a Simple Modal.</p>',
})

Cree un diálogo de confirmación con los botones confirmar y cancelar.

var modal2 = new SimpleModal({


title: 'Confirm Dialog',


body: '<p>This is a Confirm Dialog.</p>',


buttons: [




{






value: 'cancel'




},




{






value: 'OK',






callback: function(modal) {








modal.updateTitle('You clicked OK!');








return false;






}




}


]
})

Mostrar el cuadro de diálogo de & modal en la pantalla.

modal1.show();
modal2.show();

Todas las opciones de configuración disponibles.

// Disables scrolling on page whilst modal is shown.
disableScrolling: true,

// Animation time in ms for fadeIn and fadeOut functions.
transitionTime: 400,

//
HTML tag to wrap modal title string with.
titleTag: 'h4',

// Maximum number of modals to be displayed on page at one time.
 maximumModals: 6,

// Callback once modal is shown.
onComplete: null,

// Theme class to be applied to the modal.
theme: null,

// Whether or not clicking outside of the modal should close the modal.
closableOnOutsideClick: true,

// HTML string for the modal body content.
body: null,

// The title string for the modal.
title: null,

// Whether the close icon is available on the modal or not.
closable: false,

// extra-small, small, medium, large, extra-larg
siez: 'extra-small',

// The buttons which appear at the bottom of the modal, see button options for more info.
buttons: null

API methods.

var modal = new SimpleModal({ ... }).show(function(modal) {


// The show method accepts one argument which is a callback ran once the


// modal is in the DOM. The callback passes through the instance of the


// modal we just created.



// Returns instance of self
});

var modal = new SimpleModal({ ... }).close(function(modal) {


// The close method accepts one argument which is a callback ran once the


// modal has been removed from the DOM. The callback passes through the


// instance itself.



// Returns instance of self
});

var modal = new SimpleModal({ ... }).closeAll(function(modal) {


// The closeAll method will close all currently open modals, any references


// to these modals will still be available, the modals will no longer be in


// the DOM though. Once again the closeAll method accepts one argument


// which is a callback function ran once all modals have been removed from the DOM.



// Returns instance of self
});

// The getModalElement method will return the javascript node object
// for the modal. This is useful if you need to bind to content within
// the modal once it has been created.

// Required to be ran separate from instantiating SimpleModal as it
// does not return instance of itself
var modal = new SimpleModal({ ... });
var modalElement = modal.getModalElement();

// The updateTitle method will update the modal title live in the DOM
// if there was a title set in the initial options. Otherwise it'll
// add the title to the options. If there was a title in the original
// options and the overwrite is set to true, this will also update the
// options to use the new title. So should the same instance of module
// be used again in future it will have the new title.

// Returns instance of self
var modal = new SimpleModal({ ... }).updateTitle('new title', overwrite);





// The updateBody method acts the same with regards to the updateTitle
// method, except it acts on the body option and accepts HTML as part
// of the new string.

// Returns instance of self
var modal = new SimpleModal({ ... }).updateBody('<p>new body</p>', overwrite);