El modal Plugin
El plug-in Modal es una ventana de cuadro de diálogo / emergente que aparece en la parte superior de la página actual:
Tip: Los complementos pueden ser incluidos de forma individual (usando la rutina de carga individuales "modal.js" de archivos), o todos a la vez (utilizando "bootstrap.js" o "bootstrap.min.js" ).
Cómo crear un modal
El siguiente ejemplo muestra cómo crear un referente básico:
Ejemplo
<!-- Trigger the modal with a button -->
<button type="button" class="btn
btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Modal -->
<div id="myModal"
class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Inténtalo tú mismo " ejemplo Explicación
El "Trigger" parte:
Para activar la ventana modal, es necesario utilizar un botón o un enlace.
A continuación, incluir los dos data-* atributos:
-
data-toggle="modal"se abre la ventana modal -
data-target="#myModal"apunta a la identificación de la modal
El "Modal" parte:
El padre <div> de la modal debe tener un ID que es el mismo que el valor del atributo de destino de los datos utilizados para activar la modal ("myModal") .
El .modal clase identifica el contenido de <div> como un enfoque modal y trae a la misma.
El .fade clase añade un efecto de transición que se desvanece el referente dentro y fuera. Eliminar a esta clase si no desea este efecto.
El atributo role="dialog" mejora la accesibilidad para las personas que utilizan lectores de pantalla.
El .modal-dialog clase define la anchura adecuada y el margen de la modal.
El "contenido modal" parte:
La <div> con class="modal-content " estilos modal (borde, color de fondo, etc.). Dentro de este <div> , agregue el modal de cabecera, cuerpo y pie de página.
El .modal-header clase se utiliza para definir el estilo de la cabecera de la modal. El <button> dentro de la cabecera tiene una data-dismiss="modal" atributo que cierra el modal si hace clic en él. Los .close estilos de clase en el botón Cerrar, y los .modal-title estilos de clase de la cabecera con una línea de altura adecuada.
El .modal-body clase se utiliza para definir el estilo para el cuerpo de la modal. Añadir cualquier tipo de código HTML aquí; párrafos, imágenes, vídeos, etc.
El .modal-footer clase se utiliza para definir el estilo del pie de página de la modal. Tenga en cuenta que esta zona está alineado a la derecha de forma predeterminada.
Tamaño modal
Cambiar el tamaño de la modal mediante la adición de la .modal-sm clase para pequeños modales o .modal-lg clase para grandes modales.
Agregue la clase de tamaño a la <div> elemento con la clase .modal-dialog :
 | Por defecto, los modales son de tamaño medio. |
|---|
Bootstrap completar modal de referencia
Para una referencia completa de todas las opciones modales, métodos y eventos, visite nuestro Bootstrap JS modal de referencia .