Tema 22 · Ventanas Modales

Ventanas Modales Emergentes (Modals)

Aprende a implementar ventanas modales profesionales con Bootstrap 5: activación con data-bs-toggle="modal", centrado vertical, bloqueo de fondo estático y personalización de tamaños.

Menús Desplegables (Dropdowns) y Colapsables Carrusel de Imágenes y Menús Deslizantes (Offcanvas)

Anatomía de una Ventana Modal en Bootstrap 5

Un modal es una caja de diálogo emergente que se dibuja sobre el resto de la página web mediante una capa oscura semitransparente (backdrop). Es el patrón por excelencia para formularios de inicio de sesión, confirmaciones críticas o visualización de detalles. 

<!-- 1. Botón activador -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
  Abrir Modal
</button>

<!-- 2. Estructura del modal -->
<div class="modal fade" id="miModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título del Diálogo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Contenido principal del mensaje o formulario.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <button type="button" class="btn btn-primary">Aceptar</button>
      </div>
    </div>
  </div>
</div>

Modificadores Útiles de Modal

  • Centrado Vertical: Agrega .modal-dialog-centered para que el diálogo flote exactamente en el centro geométrico de la pantalla.
  • Fondo Estático (No se cierra al hacer clic afuera): Agrega data-bs-backdrop="static" en el contenedor .modal.
  • Variantes de Tamaño: .modal-sm (pequeño), .modal-lg (grande) o .modal-xl (extragrande).
  • Scroll Interno en Modales Largos: Agrega .modal-dialog-scrollable para que la barra de desplazamiento quede contenida dentro del .modal-body.

⚡ Ventana Modal Centrada con Fondo Estático en Bootstrap 5

Haz clic en el botón para abrir el diálogo modal interactivo con animación suave y botón de descarte integrado:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Modales en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 600px;">
    <div class="card shadow-sm border-0 rounded-4 p-4 bg-white text-center">
      <h4 class="fw-bold text-dark mb-2">Diálogos Emergentes con Bootstrap 5</h4>
      <p class="text-secondary small mb-4">
        Presiona el botón inferior para abrir la ventana modal centrada con capa de fondo estática:
      </p>

      <!-- Botón que activa el modal -->
      <button type="button" class="btn btn-primary px-4 py-2 rounded-pill fw-semibold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalKilopolis">
        Abrir Ventana Modal &raquo;
      </button>
    </div>
  </div>

  <!-- Componente Modal de Bootstrap -->
  <div class="modal fade" id="modalKilopolis" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="modalTitulo" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content border-0 shadow rounded-4 overflow-hidden">
        <div class="modal-header bg-primary text-white p-3">
          <h5 class="modal-title fw-bold" id="modalTitulo">
            🏛️ Certificación Kilopolis Academia
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body p-4 text-start">
          <p class="mb-2 text-dark">
            <strong>¡Felicitaciones por completar tus lecciones!</strong>
          </p>
          <p class="text-secondary small mb-0">
            Este modal está configurado con <code>data-bs-backdrop="static"</code>, lo que significa que no se cerrará si haces clic por accidente en el fondo oscuro exterior. Debes presionar un botón para interactuar.
          </p>
        </div>
        <div class="modal-footer bg-light p-3">
          <button type="button" class="btn btn-outline-secondary rounded-pill px-3" data-bs-dismiss="modal">
            Cerrar Diálogo
          </button>
          <button type="button" class="btn btn-primary rounded-pill px-4 fw-semibold" onclick="alert('¡Certificado emitido con éxito!');" data-bs-dismiss="modal">
            Descargar Certificado
          </button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.