Al usar el cuadro de diálogo Bootstrap Modal, debe escribir el cuadro de diálogo HTML en la página. Si hay muchos lugares en una página que requiere un cuadro de diálogo, significa que necesita escribir múltiples, lo que se siente muy problemático. No estoy acostumbrado al método del cuadro de diálogo Bootstrap Modal, por lo que hice una encapsulación y expansión simples, agregué un título, ancho y altura personalizado, y se muestra en el centro de acuerdo con el ancho y la altura.
Propiedades predeterminadas:
ID: "modal", // ID emergente
Título: "Diálogo", // Título emergente
Ancho: "600", // ancho de la ventana popt-up, % no es compatible con el momento
Altura: "500", // La altura popular de la ventana, no admite %
telón de fondo: verdadero, // Si se muestra la oclusión, es lo mismo que la caja modal de bootstrap nativa
teclado: verdadero, // si habilita la tecla ESC para salir, es lo mismo que la caja modal de bootstrap nativa
Remoto: "", // Cargue una URL remota, al igual que la caja modal de Bootstrap nativa
OpenEvent: NULL, // función de devolución de llamada después de que se abre la ventana emergente
CloseEvent: NULL, // función de devolución de llamada después de que se cierre la ventana emergente
okevent: nulo // Haga clic en el botón Aceptar a la función de devolución de llamada
Cómo usar:
1. Definir a través del atributo HTML Data-*
Copie el código de la siguiente manera: <a href = "#" data-remote = "test.html" data-mtitle = "modal1" data-id = "m1" data-width = "600" data-okent = "ok ()"> pop-up demo </a>
2. Inicializar a través de JS
$ (". mzdialog"). mzdialog ();
Lugares y errores inadecuados, aquí hay solo una referencia para el aprendizaje y puede modificarlos y mejorarlos usted mismo
1. El complemento Bootstrap-MzDialog tiene solo 2 botones en este momento. Cancelar y confirmar, y los botones personalizados aún no son compatibles. Puede modificar el código fuente y agregar esta función.
2. Solo puede usar el método HTML Data-* para definirlo. No admite los parámetros de configuración durante la inicialización de JS. Puede modificar el código fuente y extender esta función usted mismo.
3. El peso y la altura no deben usarse.
4. Tenga en cuenta que la función de devolución de llamada aquí debe estar en un formato de cadena, como okevent: "ok ()". Aquí, la función definida por la función OK en sí misma, recuerde incluir ();
Código fuente JS:
/*------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------- telón de fondo: verdadero, // Si se muestra la oclusión, lo mismo que el teclado de la caja modal de bootstrap nativa: verdadero, // Si la tecla ESC está habilitada para salir, lo mismo que el cuadro modal nativo de Bootstrap Remote: "", // Cargue la url remota, lo mismo que el cuadro modal nativo de Bootstrap OpenEvent: Null, // Llamando el cierre de la llamada de la llamada: Calling el nulo, ////////////////////////////////////////1. OKEVEVEN: NULL // Haga clic en el botón Aceptar a la función de devolución de llamada}; // Ventana de creación dinámica var creatialog = {init: function (opts) {var _elf = this; // Ventana de inserción dinámica var d = _self.dhtml (opts); $ ("Body"). Append (d); var modal = $ ("#"+opts.id); // Inicializar ventana modal.modal (opts); // Posición del tamaño de la ventana var h = modal.height ()-modal.find (".-Header modal"). OuterHeight ()-modal.find (". modal.css ({'margin-left': opts.width/2*-1, 'margin-top': opts.height/2*-1, 'top': '50%'}). find (". modal-cuerpo"). Innerheight (h); modal // show window.modal ('show') // Eliminar la ventana después de ocultar la ventana html .on ('hidden', function () {modal.remove (); $ (". modal-backdrop"). remove (); if (opts.cloeeVent) {upts.cloSeeVent);}) // después de la ventana se muestra (se muestra (se muestra). if (opts.openvent) {eval (opts.openvent); }, dhtml: function (o) {return '<div id = "'+o.id+'" role = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true"> <div> <button type = "botón" data-dismiss = "modal" aria-hidden = "true"> × </button> <h33 id = "mymodallabel"> '+o.title+' </h3> </div> <div> <p> Cargando ... </p> </div> <div> <button data-dismiss = "modal" aria-hidden = "true"> cancelar </botón> <botón> confirmar </botón> </div> </div> '; }}; return this.each (function () {$ (this) .Click (function () {var opts = $ .extend ({}, defaults, {id: $ (this) .attr ("data-id"), title: $ (this) .attr ("data-mtitle"), width: $ (this) .attr ("data-width"), altura: $ (this). (this) .attr ("), dataTht"), dataTr (") telón de fondo: $ (this) .Attr ("Data-Backdrop"), teclado: $ (this) .Attr ("Data-Keyboard"), remoto: $ (this) .Attr ("Data-Remote"), OpenEvent: $ (this) .Attr ("Data-OpenEvent"), Closeebent: $ (this) .Attr ("Data-closeEvent"),,,,),,,),,),,),,),),),),),),),),),),),),),),),),),),),),). OKEVEN: $ (this) .attr ("data-okent")}); }; }) (jQuery);Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.