Anteriormente, explicamos el uso de la pestaña Bootstrap. Hoy aprenderemos sobre el uso de ventanas emergentes modelo en Bootstrap.
Efecto:
Código:
<input id = "btntext" type = "button" value = "Agregar componente de texto" data-toggle = "modal" data-target = "#mymodal" href = "../ sysmanage/zujianmanage.aspx"/> <!-modal-> <div ID = "mymodal" tabindex = "-1" role = "dialog"> <div> <button type "button" data-dismiss = "modal"> × </boton> <h3 id = "mymodallabel"> encabezado modal </h3> </div> <div> </div>
Es muy simple, eso es todo.
Nota: La propiedad de datos de datos apunta a la ID del modelo, así que haga clic en el botón y aparecerá el modelo.
Por supuesto, también puedes usar JS para controlarlo.
El siguiente código:
Show: $ ('#mymodal'). Modal ('show');
Ocultar: $ ('#mymodal'). Modal ('escondite');
Interruptor: $ ('#myModal'). Modal ('Toogle');
Evento: $ ('#mymodal'). On ('Hidden', function () {// hacer algo ...});
Nota: utilicé el atributo HREF aquí, que es dejar que el modelo sea remoto una URL. Por supuesto, puede escribir lo que quiere directamente en el cuerpo modelo.
Si observa cuidadosamente la estructura DIV del modelo, comprenderá que el cuerpo del modelo representa el contenido y el encabezado del modelo es el encabezado. Entonces, si desea agregar dos botones en la parte inferior, debe usar el siguiente código.
<Viv> <a href = "#"> Cerrar </a> <a href = "#"> Save </a> </iv>
Nota: Si desea establecer el ancho del modelo, debe agregar el diseño. Es para colocar el modelo en el bloque de código a continuación y establecer el ancho del modelo. Style = "Ancho: 500px". Por cierto, no puedes simplemente ponerlo en la clase usando el estilo SPAN. .
<div> </div>
Lo anterior es el uso de la caja emergente del modelo Bootstrap introducido por el editor. ¡Espero que sea útil para todos!