Dailog basado en Bootstarp

Introducción a Bootstrip

Bootstrap, de Twitter, es actualmente un marco popular front-end.

Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido. Desarrollado por el diseñador de Twitter Mark Otto y Jacob Thornton, es un marco CSS/HTML.

Bootstrap proporciona especificaciones elegantes de HTML y CSS, que se escriben menos en el lenguaje dinámico CSS. Bootstrap fue popular desde su lanzamiento y ha sido un popular proyecto de código abierto en GitHub, incluidas las noticias de última hora de MSNBC de la NASA. Los marcos que son más familiarizados para los desarrolladores móviles nacionales, como el marco de código abierto frontal WEX5, también se basan en el código fuente de Bootstrap para la optimización del rendimiento.

1.1. Ayuda de las palabras clave del documento

Boostrap Modal Box Oaodailog

1.2. Escenarios de uso

Cuando se hace clic en un botón en una página web, el usuario debe solicitar una confirmación, y el usuario solo puede continuar ejecutándose, o el usuario hizo clic en el botón Cancelar para cancelar la ejecución;

Cuando hace clic para ver en la página web y los datos mostrados deben mostrarse utilizando un cuadro emergente, puede usar OAODAILOG

1.3. Diagrama esquemático

Modal basado en Boostrap3.0, jQuery1.9

1.4. Instrucciones de uso

¿Por qué necesitas OAODAILOG?

a. Desde el modal proporcionado por Boostrap3.0, primero se debe definir un código oculto Div Modal en la página. El usuario escribe el contenido que se mostrará en el DIV. Si una página tiene múltiples cuadros modales, se deben escribir múltiples cuadros modales ocultos Div Ocultos ocultos, lo que sin duda es redundante.

b. Dado que el modal predeterminado no tiene un botón de confirmación y cancelación, por supuesto, podemos escribir dos botones en el DIV oculto del cuadro modal, pero también necesitamos escribir JS para monitorear las operaciones realizadas después de hacer clic en el botón de confirmación. Al mismo tiempo, las operaciones realizadas por el botón de confirmación están relacionadas con los datos haciendo clic en el usuario cuando la ventana emergente. Cómo se pasan los datos, Bootstrap no nos proporciona.

do. La versión 1.0.0 de OAODAILOG resuelve principalmente el problema del uso inconveniente de cuadros modales de Bootstrap y el código redundante.

Imagen de reproducción:

Empezar

1. Introducir oaodailog.js

Código:

 <script type = "text/javascript" src = "$ {ctx} /static/jquery/jqueryapi/oaodialog/oao.dialog.js" charset = "utf-8"> </script>

2. Llame al código que muestra el cuadro emergente

Código:

 oao.dialog ({Título: "Eliminar el cuadro de inmediato", Contenido: "Confirme si realmente se elimina, ¡no se restaurará después de la eliminación!", ok: function () {oao.dialog.close ();}});

Esta es una forma básica y más común de usar el cuadro emergente de confirmación.

1.5. API

oao.dialog (): Este método es un método para generar un cuadro emergente. El parámetro aprobado es un objeto JSON. Por supuesto, no puede pasar nada, y aparecerá una caja emergente en blanco, lo cual no es un problema. A continuación se describe el significado y los valores predeterminados de cada parámetro.

• oao.dialog.close (): cierre la caja modal

1.6. Funciona para ser compatible 1. Actualmente, el contenido del cuadro emergente solo admite texto y HTML estático, y no admite solicitudes de URL.

2. Actualmente, solo se pueden mostrar dos botones como máximo, y los botones personalizados no son compatibles.

3. La posición y el tamaño actuales del cuadro emergente no admiten la personalización

4. Actualmente, solo una caja emergente puede aparecer a la vez, y no es compatible con aparecer otra caja modal en el cuadro emergente (Bootstrap Modal no es compatible con la capa subyacente)

Estén atentos, nos vemos en la próxima versión.

 /*!* Oaodialog 1.0.0* Autor: Xufei* Fecha: 2015-7-9 1: 32* http: //www.oaoera.com* Copyright © 2014 www.oaoera.com Inc. Todos los derechos reservados. Shanghai ICP No. 13024515-1 Shanghai Yixin E-Commerce Co., Ltd. ** Esto tiene licencia bajo GNU LGPL, Versión 2.1 o posterior.* Para detalles, consulte: http://createVecommons.org/licenses/LGPL/2.1/*////OAA Samespace Oao = {{}; function (configuración) {var defaultSettings = {title: "solicit", content: "", okval: "confirmar", cancalVal: "cancel", ok: function () {$ ("#oaomodal"). modal ('hide');}, cancel: function () {$ ("#oaomodal"). modal ('hide');}, Close: Close: CANA $ .extend ({}, defaultSettings, configuración || {}); return oao.settings;} oao.initContent = function () {var modelhtml = "<div id =/" oaomodal/"class =/" modal fade delete_modal/"tabindex =/"-1/"rol =/" dialog/" aria-labelledby =/"mymodallabel/" aria-hidden =/"true/"> "+" <div class =/"modal-dialog/"> "+" <div class =/"modal-Content/"> "+" <div class =/"modal-header/"> "+" <button type =/"button/" class =/"cerrar/" data-dississs = "modal/" " aria-label =/"Close/"> <span aria-hidden =/"true/"> × </span> </boton> "+" <h4 class =/"modal-title/"> </h4> "+" </div> "+" <divs class =/"modal-body/" style =/"text-align: Center; class =/"modal-footer/"> "+" <button type =/"button/" class =/"btn btn-default modalCancel/"> </botte> "+" <button type =/"butto $ modelhtml = $ (modelhtml); $ (". modalok", $ modelhtml) .text (oao.settings.okval); $ (". modalcancel", $ modelhtml) .text (oao .settings.cancalval); $ (". Modal-title", $ modelhtml) .text (oao.settings.title); $ (". modal-cuerpo", $ modelhtm l) .html (oao.settings.content); if (! oao.settings.ok) {$ (". modalok", $ modelhtml) .remove ();} if (! oao. settings.cancel) {$ (". ModalCancel", $ modelhtml) .remove ();} $ ("cuerpo"). append ($ modelhtml);} // método para el cuadro de diálogo emergente oao.dialog = function (configuración) {settings = oao.init (settings); oao.initcontent (); // método de llamada $ ('#oaomodal'). on ('hidden.bs.modal', function (e) {if (oao.settings.close) {oao.settings.close ();} $ ("#oaomodal"). remove ();}) if (oao.settings.ok) {$ ("#oaomodal .modalok"). click (settings.ok);} if (oao.settings.cancel) .modalCancel "). Click (settings.cancel);} $ ("#oaomodal "). modal ('show'). css ({" margin-top ": function () {return ($ (this) .Height ()/ 2-200);}}}) ;;} // Método para cerrar el dialog oao.dialog.clecleg. function () {$ ("#oaomodal"). modal ('hide');}