Complemento modal Bootstrap
El complemento modal
El complemento Modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual:
Sugerencia: los complementos se pueden incluir individualmente (usando el archivo "modal.js" individual de Bootstrap) o todos a la vez (usando "bootstrap.js" o "bootstrap.min.js").
Cómo crear un modal
El siguiente ejemplo muestra cómo crear un modal 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>
Ejemplo explicado
La parte "Disparador":
Para activar la ventana modal, debe usar un botón o un enlace.
Luego incluya los dos atributos data-*:
data-toggle="modal"abre la ventana modaldata-target="#myModal"apunta a la identificación del modal
La parte "modal":
El padre <div>del modal debe tener un ID que sea el mismo que el valor del atributo de destino de datos utilizado para activar el modal ("myModal").
La .modalclase identifica el contenido de <div>como un modal y lo enfoca.
La .fadeclase agrega un efecto de transición que desvanece el modal hacia adentro y hacia afuera. Elimina esta clase si no quieres este efecto.
El atributo role="dialog"mejora la accesibilidad para las personas que usan lectores de pantalla.
La .modal-dialogclase establece el ancho y el margen adecuados del modal.
La parte "Contenido modal":
El <div>with class="modal-content" diseña el modal (borde, color de fondo, etc.). Dentro de this <div>, agregue el encabezado, el cuerpo y el pie de página del modal.
La .modal-headerclase se usa para definir el estilo del encabezado del modal. El <button>interior del encabezado tiene un data-dismiss="modal"atributo que cierra el modal si hace clic en él. La .closeclase aplica estilo al botón de cierre y la .modal-titleclase aplica estilo al encabezado con una altura de línea adecuada.
La .modal-bodyclase se utiliza para definir el estilo del cuerpo del modal. Agregue cualquier marcado HTML aquí; párrafos, imágenes, videos, etc.
La .modal-footerclase se utiliza para definir el estilo del pie de página del modal. Tenga en cuenta que esta área está alineada a la derecha de forma predeterminada.
Tamaño modal
Cambie el tamaño del modal agregando la .modal-sm
clase para modales pequeños o .modal-lgla clase para modales grandes.
Agregue la clase de tamaño al <div>elemento con clase .modal-dialog:
pequeño modal
<div class="modal-dialog modal-sm">
modal grande
<div class="modal-dialog modal-lg">
Por defecto, los modales son de tamaño mediano.
Referencia modal completa de Bootstrap
Para obtener una referencia completa de todas las opciones modales, métodos y eventos, vaya a nuestra Referencia modal de Bootstrap JS .