Bootstrap 4 modales
Bootstrap 4 modales
El componente Modal es un cuadro de diálogo/ventana emergente que se muestra en la parte superior de la página actual:
Cómo crear un modal
El siguiente ejemplo muestra cómo crear un modal básico:
Ejemplo
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Añadir animación
Use la .fadeclase para agregar un efecto de desvanecimiento al abrir y cerrar el modal:
Ejemplo
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Tamaño modal
Cambie el tamaño del modal agregando la .modal-sm
clase para los modales pequeños, la .modal-lgclase para los modales grandes o .modal-xlpara los modales extragrandes.
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">
Modal Extra Grande
<div class="modal-dialog modal-xl">
De forma predeterminada, los modales son de tamaño "mediano".
Modal centrado
Centre el modal vertical y horizontalmente dentro de la página, con la .modal-dialog-centered
clase:
Ejemplo
<div class="modal-dialog modal-dialog-centered">
Desplazamiento modal
Cuando tiene mucho contenido dentro del modal, se agrega una barra de desplazamiento a la página. Vea los ejemplos a continuación para entenderlo:
Ejemplo
<div class="modal-dialog">
Sin embargo, solo es posible desplazarse dentro del modal, en lugar de la página en sí, agregando .modal-dialog-scrollablea .modal-dialog:
Ejemplo
<div class="modal-dialog modal-dialog-scrollable">
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 .