Diálogos Modales

Ventanas de diálogo superpuestas para contenido importante e interacciones

1 Modal Básico

El modal más simple con header, body y footer.

Estructura del Modal: 
<div class="modal fade" id="basicModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">...</div>
      <div class="modal-body">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>
💡 Concepto Clave: Los modales requieren tres capas anidadas: .modal → .modal-dialog → .modal-content

2 Tamaños de Modal

Bootstrap ofrece cuatro tamaños de modal usando clases en .modal-dialog .

Pequeño
.modal-sm

300px máximo

Por Defecto
(sin clase)

500px máximo

Grande
.modal-lg

800px máximo

Extra Grande
.modal-xl

1140px máximo

3 Modales con Scroll

Cuando el contenido es largo, los modales pueden desplazarse de dos maneras.

Por defecto, la página completa se desplaza cuando el contenido del modal es largo.

Añade .modal-dialog-scrollable para desplazar solo el body del modal.

4 Posicionamiento y Pantalla Completa

Centrado verticalmente con .modal-dialog-centered

Cubre toda la pantalla con .modal-fullscreen

Pantalla completa solo en móviles

5 Ejemplo Práctico: Galería de Imágenes

Usa modales para crear una galería de imágenes con información detallada.

Imagen 1
Imagen 2
Imagen 3

🎯 Puntos Clave sobre Modales

  • Backdrop automático: Overlay oscuro detrás del modal
  • Gestión de foco: El foco se mueve al modal cuando se abre
  • Escape para cerrar: Presiona Escape para cerrar el modal
  • Accesibilidad: Incluye atributos ARIA automáticamente
  • Responsive: Los tamaños se adaptan a diferentes pantallas
← Anterior Lección Siguiente: Carrusel →