Bootstrap5 Modales

Un modal es una subventana que se superpone a la ventana principal. Normalmente, su propósito es mostrar contenido de una fuente independiente, lo que permite cierta interacción sin salir de la ventana principal. La subventana puede proporcionar interacción de información, etc.

Cómo crear un modal

El siguiente ejemplo crea un efecto de modal simple:

Ejemplo

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Abrir modal</button> <!--Modal--> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!--Encabezado del modal--> <div class="modal-header"> <h4 class="modal-title">Título del modal</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!--Contenido del modal--> <div class="modal-body">Contenido del modal..</div> <!--Pie del modal--> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cerrar</button> </div> </div> </div> </div>

Pruébalo »

Agregar animación

Usa la clase .fade para establecer el efecto de aparición o cierre del modal:

Ejemplo

<!--Con efecto de animación--> <div class="modal fade"></div> <!--Sin efecto de animación--> <div class="modal"></div>

Pruébalo »

Tamaños de modal

Podemos agregar.modal-smclase para crear un modal pequeño,.modal-lgla clase puede crear un modal grande.

La clase de tamaño se coloca<div>del elemento.modal-dialogdespués de la clase:

Ejemplo - Modal pequeño

<div class="modal-dialog modal-sm">

Pruébalo »

Ejemplo - Modal grande

<div class="modal-dialog modal-lg">

Pruébalo »

Ejemplo - Modal extragrande

<div class="modal-dialog modal-xl">

Pruébalo »

Pantalla completa

Usa.modal-fullscreenla clase para mostrar el modal en pantalla completa:

Ejemplo - Pantalla completa

<div class="modal-dialog modal-fullscreen">

Pruébalo »

Usa.modal-fullscreen-*-*la clase permite controlar en qué tamaño se muestra en pantalla completa:

Clase Descripción Ejemplo
.modal-fullscreen-sm-down Pantalla completa por debajo de 576px Pruébalo
.modal-fullscreen-md-down Pantalla completa por debajo de 768px Pruébalo
.modal-fullscreen-lg-down Pantalla completa por debajo de 992px Pruébalo
.modal-fullscreen-xl-down Pantalla completa por debajo de 1200px Pruébalo
.modal-fullscreen-xxl-down Pantalla completa por debajo de 1400px Pruébalo

Centrar el modal

Usa.modal-dialog-centeredla clase permite centrar el modal tanto horizontal como verticalmente:

Ejemplo

<div class="modal-dialog modal-dialog-centered">

Pruébalo »

Barra de desplazamiento del modal

Por defecto, si el modal contiene mucho contenido, la página genera automáticamente un desplazamiento, y el modal se desplaza junto con la página:

Ejemplo

<div class="modal-dialog">

Pruébalo »

Si solo queremos poner una barra de desplazamiento dentro del modal, podemos usar.modal-dialog-scrollablela clase:

Ejemplo

<div class="modal-dialog modal-dialog-scrollable">

Pruébalo »
Otras extensiones