El componente Modal de Bootstrap es una herramienta útil para mostrar contenido interactivo como formularios de inicio de sesión, galerías de imágenes o alertas. Los modales son esencialmente cuadros de diálogo que aparecen sobre el contenido principal y requieren la interacción del usuario para cerrarse. Se pueden activar mediante diferentes eventos, como clics en botones, enlaces o funciones de JavaScript.

Características clave

Los modales de Bootstrap ofrecen tamaños personalizables, animaciones, fondos y posicionamiento. Admiten varios tipos de contenido y pueden ser activados por diferentes eventos. También son accesibles para todos los usuarios y pueden mejorarse aún más añadiendo atributos ARIA y gestión de enfoque.

Clases de uso

• modal: Clase base para crear un cuadro de diálogo modal;
• modal-dialog: Contenedor para el contenido del modal;
• modal-content: Envoltorio para el encabezado, cuerpo y pie del modal;
• modal-header: Contenedor para el título del modal y el botón de cierre opcional;
• modal-title: Da estilo al título del modal;
• modal-body: Contenedor para el contenido principal del modal;
• modal-footer: Contenedor para botones o contenido adicional en el pie del modal;
• fade: Aplica una animación de desvanecimiento al modal para transiciones suaves;
• modal-dialog-centered: Centra el modal verticalmente dentro de la ventana de visualización;
• modal-static: Evita que el modal se cierre al hacer clic fuera o al presionar la tecla Escape.

Ejemplo 1: Modal básico

Ejemplo 2: Modal animado