Modal es un cuadro de diálogo o una ventana emergente que se utiliza para dar información importante al usuario antes de tomar cualquier acción o avanzar más en una página web. Básicamente, los modales Bootstrap 5 se utilizan para dar información como el tiempo de espera de la sesión o aparece cuando un usuario intenta eliminar o actualizar algo. Además, se utiliza para fines de confirmación o para mostrar contenido oculto a pedido.

Este artículo es sobre

• Cómo crear un modal en Bootstrap 5?
• Modal básico
• Agregar animación a un modal
• Tamaños modales
• Modal centrado
• Modal de pantalla completa
• Modal de pantalla completa receptiva
• Modal de desplazamiento

Cómo crear un modal

Para crear un modal, primero cree un DIV con .modal clase junto con su único identificación Entonces envuelve este div en un divir con .dialog modal clase, dentro de este div crea otro divir con el .contenido modal clase y interior .contenido modal div crea tres divs más con el .encabezador modal, .cuerpo modal, .pie modal clases.

.encabezador modal div contiene el título del modal y su botón de despido.

.cuerpo modal div contiene el contenido principal del modal.

.pie modal div contiene los botones de control del modal.

Modal básico

Para crear un modal básico, cree un div que use .modal clase con único identificación Después de eso envuelve este div en los divs que contienen .dialog modal, .contenido modal, .encabezador modal, .cuerpo modal y .pie modal Clases como se muestra en el ejemplo.

Agregar categorías

Este ejemplo modal es para agregar categorías

Abierto

Categorías

Agregar
Cerca

Así es como se crea un modelo básico.

Agregar animación a un modal

Para agregar animación a su uso modal .desteñir clase con .modal clase:

…

Así es como se aplica la animación de Fade en modal.

Sin animación

Eliminar el .desteñir clase para abrir el modal sin ninguna animación.

…

Así es como se ve un modal sin animación.

Tamaños modales

Los modales pueden tener tres tamaños:

• Pequeño
• Grande
• Extra grande

Pequeño modal

Para crear un pequeño modal, el .modal-SM Se usa la clase:

…

Así es como se crea un pequeño modal.

Modal grande

Para crear un gran modal, el .modal-lg Se usa la clase:

…

Así es como se crea un gran modal.

Modal extra grande

Para crear un modal extra grande, el .modal-xl Se usa la clase:

…

Así es como se crea un modal extra grande.

Modales de pantalla completa

Si desea que su modal aparezca en la pantalla completa, use .pantalla modal clase con .dialog modal clase.

…

Así es como se crea un modal de pantalla completa.

Modales de pantalla completa receptiva

También podemos controlar cuándo se mostrará el modal como un modal de pantalla completa. Para eso, use las siguientes clases como su requisito.

• .modal-fullscreen-sm-abajo Esta clase muestra modales de pantalla completa cuando el tamaño de la pantalla está por debajo de 576px.
• .modal-fullscreen-md Esta clase muestra modales de pantalla completa cuando el tamaño de la pantalla está por debajo de 768px.
• .modal-fullscreen-lg-down Esta clase muestra modales de pantalla completa cuando el tamaño de la pantalla está por debajo de 992px.
• .modal-fullscreen-xl Esta clase muestra modal de pantalla completa cuando el tamaño de la pantalla está por debajo de 1200px.
• .modal-fullscreen-xxl Esta clase muestra modal de pantalla completa cuando el tamaño de la pantalla está por debajo de 1400px.

Modal centrado

Usar .centrado en el dialog modal clase con .dialog modal Para mostrar modales vertical y horizontalmente en el centro de la página.

…

Modal de desplazamiento

Una barra de desplazamiento se agrega automáticamente a una página cuando el contenido en un modelo es grande.

Por lo tanto, no es un buen enfoque desplazar toda la página en lugar de desplazar el modal solo para resolver este problema, agregue una clase .modal-dialog-srollable con el .dialog modal clase para hacer que el modal desplazable

…

Un modal desplazable se crea con éxito y funciona perfectamente bien.

Conclusión

Modal se crea usando el .modal clase que envuelve otros divs que contienen .dialog modal, .contenido modal, .encabezador modal, .cuerpo modal, .pie modal . El artículo anterior describe la estructura básica del modal Bootstrap 5 con un encabezado, cuerpo y pie de página que contienen botones de acción para el usuario. Además, muestra diferentes tipos modales como tamaños modales, modales con o sin animación, modales modales centrados y receptivos con pantalla completa.