En esta lección, aprenderemos principalmente sobre el complemento de la caja modal en Bootstrap, que es un complemento de función emergente muy común para sitios web interactivos.
Para obtener más información sobre el complemento Bootstrap Modal Box, haga clic en el tema especial "Tutorial de uso modal de Bootstrap" para aprender. Espero que te guste, así que continúa abajo
uno. Uso básico
Los componentes emergentes que utilizan cajas modales requieren tres capas de elementos de contenedores DIV, a saber, modal (capa de declaración modal),
diálogo (capa de declaración de ventana), contenido (capa de contenido). En la capa de contenido, hay tres capas, a saber, encabezado, cuerpo y pie de página.
// Ejemplo básico
< en el miembro temporalmente </p> </div> <!-Nota de pie-> <div> <botón type = "botón"> registrar </botón> <botón type = "botón"> Iniciar sesión </botón> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Si desea que el cuadro modal se oculte automáticamente y luego aparezca haciendo clic en el botón, debe hacer las siguientes operaciones.
// Eliminar la muestra en el cuadro modal y agregar un id <div id = "mymodal"> // Haga clic para activar el cuadro modal para mostrar <botón data data-toggle = "modal" data-target = "#mymodal"> Haga clic en la ventana emergente </botón> // hay tres tamaños de ventanas emergentes, que son normales por predeterminado, y hay lg (grande) y sm (pequeño) <div> id = "mymodal"> // use líquido en el sistema de cuadrícula en la parte del cuerpo principal <!-cuerpo principal-> <div> <div> <div> <div> 1 </div> <div> 1 </div> <div> 1 </div> <div>
dos. Instrucciones de uso
Después de la introducción del uso básico, echemos un vistazo a los diversos usos importantes del complemento. Todos los complementos se basan en JavaScript/jQuery. Luego, hay cuatro elementos: uso, parámetros, métodos y eventos.
1. Uso
El primer tipo: se puede pasar a través del atributo de datos
// data-togGledata-toggle = "modal" data-target = "#mymodal"
Data-toggle indica el tipo de activación
Data-Target indica el nodo activado
Si no está usando <boton>, pero <a>, donde Data-Target también puede usar href = "#myModal"
reemplazar. Por supuesto, recomendamos usar datos de datos. Además de los dos atributos declarados, toggle de datos y objetivo de datos, hay algunas opciones disponibles.
2. Parámetros
Los efectos se pueden controlar estableciendo la declaración de atributos de datos-* en el elemento HTML.
// Fondo blanco y haga clic para no cerrar datos-backdrop = "false" // presione ESC para no cerrar Data-Kequel = "False" // Inicializar Hidden. Si se activa el clic del botón, no se mostrará el primer clic y la segunda vez se muestra. data-show = "false" // cargar index.html una vez en el contenedor href = "index.html"
Por supuesto, también se puede establecer directamente en JavaScript.
// declarar $ ('#mymodal') a través de jQuery.Modal ({show: true, backdrop: false, teclado: falso, remoto: 'index.html',});3. Método
Si las ventanas emergentes no se muestran de forma predeterminada, ¿cómo puedo hacer clic en Windows emergente antes y después?
// Haga clic para mostrar la ventana emergente $ ('#btn'). On ('click', function () {$ ('#mymodal'). Modal ('show');});4. Eventos
El cuadro modal admite 4 tipos de tiempo, correspondientes a la ventana emergente antes, después de la ventana emergente, antes del cierre y después del cierre.
$ ('#mymodal'). on ('show.bs.modal', function () {alert ('libre inmediatamente cuando se llama el método de espectáculo!');}); $ ('#mymodal'). on ('shows.bs.modal', function () {alerta ('gratis cuando el cuadro modal es es mostrado! ');}); $ ('#mymodal '). on (' hide.bs.modal ', function () {alert (' libre inmediatamente cuando se llama el método de ocultación! ');}); $ ('#mymodal '). on (' hiden.bs.modal ', function () {alerta (' libre después del cuadro modal está es modal es mostrado! ');}); $ ('#mymodal '). on (' loaded.bs.modal ', function () {alert (' gratis después de que se cargan los datos remotos! ');});Esta serie de tutoriales se ha compilado en: Tutoriales básicos de Bootstrap Temas especiales, bienvenidos a Click To Learn.
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.