Cómo crear una ventana modal en HTML con dialog

Para crear una ventana modal en HTML puedes utilizar el elemento <dialog> y abrirlo con showModal() desde JavaScript. El navegador lo presenta sobre el resto de la página y limita la interacción con el contenido que queda detrás.

Un modal puede servir para una confirmación o una explicación breve. Si necesitas mostrar mucho contenido, una página independiente suele ser más cómoda, especialmente en móvil.

Ejemplo completo con dialog, CSS y JavaScript

Copia este bloque en un documento HTML. El script está después de los elementos para que estos existan cuando se ejecute:

<button type="button" id="abrir">Ver información del curso</button>

<dialog id="modal" aria-labelledby="titulo-modal">
  <h2 id="titulo-modal">Información del curso</h2>
  <p>Aprenderás a construir una página con HTML y CSS.</p>
  <form method="dialog">
    <button autofocus>Cerrar</button>
  </form>
</dialog>

<style>
  dialog {
    width: min(90vw, 480px);
    max-height: 85vh;
    overflow: auto;
    box-sizing: border-box;
    border: 0;
    border-radius: 18px;
    padding: 28px;
    color: #0f172a;
    box-shadow: 0 24px 80px #0f172a40;
  }
  dialog::backdrop { background: #0f172a99; }
  button { padding: 12px 18px; cursor: pointer; }
  button:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 4px;
  }
</style>

<script>
  const abrir = document.querySelector('#abrir');
  const modal = document.querySelector('#modal');

  abrir.addEventListener('click', () => {
    if (!modal.open) modal.showModal();
  });
</script>

El formulario con method="dialog" cierra la ventana al activar su botón y no envía datos a un servidor. En este ejemplo no procesa inscripciones: solo presenta información.

Show, showModal y open: diferencias

showModal() abre el diálogo como modal. show() lo muestra sin bloquear el resto de la página. Añadir directamente open también lo muestra, pero no equivale a abrir una ventana modal.

No sustituyas la llamada a showModal() por un cambio de display. Un panel visible con CSS puede parecer igual y, sin embargo, carecer del comportamiento modal del navegador.

Cómo cerrar el modal

Además del formulario del ejemplo, puedes usar el método close() desde un evento:

// Dentro de un evento de cierre de tu componente:
modal.close();

Un diálogo modal nativo permite normalmente cerrarlo con Escape. Mantén también un botón visible para las personas que navegan con ratón o pantalla táctil. No presupongas que pulsar fuera del cuadro lo cerrará: ese comportamiento depende de cómo esté configurado e implementado.

Cómo cuidar el foco y el nombre del diálogo

aria-labelledby relaciona la ventana con su título. En el ejemplo, autofocus señala el botón de cierre como destino inicial apropiado para un mensaje breve. En un formulario largo o una confirmación delicada tendrás que elegir otro destino según la tarea.

Comprueba que al cerrar regresas a un lugar lógico, normalmente el botón que abrió la ventana si sigue disponible. Revisa además que el foco no desaparezca ni quede oculto. Si personalizas el componente, conserva los mecanismos nativos en lugar de desactivarlos sin necesidad.

Cómo evitar problemas en móvil

Limita el ancho y la altura, permite desplazamiento cuando haga falta y prueba el contenido con zoom. Un cuadro de altura fija puede dejar el botón de cierre fuera de pantalla. Evita abrir un segundo modal encima del primero salvo que tengas una razón clara y hayas revisado toda la interacción.

Errores frecuentes

• Ejecutar el script antes de que exista el elemento.
• Confundir un modal con un aviso no modal.
• Añadir display: flex globalmente a un diálogo cerrado y hacerlo visible por accidente.
• Usar el mismo identificador en varias ventanas.
• Ocultar el botón de cierre o el indicador de foco.

Preguntas frecuentes

¿Necesito Bootstrap?

No. El elemento nativo cubre este ejemplo sin una librería.

¿Y si mi audiencia usa un navegador antiguo?

Comprueba compatibilidad y ofrece una alternativa adecuada. No asumas que un cambio visual reproduce todas las funciones de un diálogo.

Para comprender los selectores y eventos del ejemplo, consulta qué es el DOM en JavaScript. Si vas a incluir campos, repasa cómo crear formularios HTML.

Referencia técnica: documentación de dialog en MDN.