Un cuadro modal (modal) es una forma infantil que se superpone en la forma principal. Por lo general, el propósito es mostrar contenido de una fuente separada, que puede tener alguna interacción sin dejar la forma principal. La subformación puede proporcionar información, interacción, etc.
Si desea hacer referencia a la funcionalidad del complemento por separado, debe hacer referencia a Modal.js. O, como se menciona en el capítulo de descripción general del complemento Bootstrap, puede consultar bootstrap.js o versiones comprimidas de bootstrap.min.js.
1. Uso
Puede alternar el contenido oculto del complemento de caja modal (modal):
A través del atributo de datos: Establezca el atributo Data-Toggle = "Modal" en el elemento controlador (como un botón o enlace), y establezca Data-Target = "#Identificador" o href = "#Identificador" para especificar el cuadro modal específico para cambiar (con id = "identificador").
Con JavaScript: usando esta técnica, puede llamar a un cuadro modal con id = "identificador" a través de una línea simple de JavaScript:
$ ('#identificador'). Modal (opciones)
2. Ejemplo simple
div id = "mymodal"> <div> <button type = "button" data-dismiss = "modal"> x </boton> <h3> Título del cuadro de marcación </h3> </div> <div> <div> <p> dial box body </p> </div> <div> <hiv> <a href = "#" Data-DISMISS = "modal"> Cancelar </a> <a href = "#"#"#" "#" "#" "#" ""#" data-dismiss = "modal"> confirmar </a> </div> </div>
El diálogo modal se puede llamar directamente usando un botón o un enlace, y este es el uso simple:
Copie el código de la siguiente manera: <a href = "#modal1" role = "botón" data-toggle = "modal"> Contract Agregar </a>
Además, cuando necesita hacer que el cuadro de diálogo borre los datos del formulario cada vez que se abren, de la siguiente manera:
La copia del código es la siguiente: $ ('#modal1'). Modal ('escondite');
$ ("#modal1"). on ("oculto", function () {$ ('#form1') [0] .reset ();}); // Después de agregar el contrato, borre la operación del formulario
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.