Ventana modal con HTML: el elemento dialog

Las ventanas modales se hacían con bibliotecas enteras de JavaScript. Hoy el elemento <dialog> de HTML trae casi todo resuelto: el fondo oscuro, cerrar con Esc, que el resto de la página no se pueda usar mientras está abierta y que el foco del teclado no se escape.

El código

<button type="button" onclick="document.getElementById('confirmar').showModal()">
  Borrar archivo
</button>

<dialog id="confirmar" aria-labelledby="d-titulo">
  <form method="dialog">
    <h2 id="d-titulo">¿Borrar «informe.pdf»?</h2>
    <p>Esta acción no se puede deshacer.</p>
    <div class="acciones">
      <button value="cancelar" autofocus>Cancelar</button>
      <button value="borrar" class="peligro">Borrar</button>
    </div>
  </form>
</dialog>

body { font-family: system-ui, sans-serif; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; border: 1px solid #c9d6e4; background: white; cursor: pointer; }
dialog {
  max-width: 22rem;
  border: 0;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 12px 32px rgb(15 31 51 / 0.3);
}
dialog::backdrop { background: rgb(15 31 51 / 0.55); }
dialog h2 { margin-top: 0; font-size: 1.2rem; }
.acciones { display: flex; justify-content: flex-end; gap: 8px; }
.peligro { background: #b91c1c; border-color: #b91c1c; color: white; }

Pulsa «Borrar archivo». Comprobado en los tres navegadores: al abrirse, el foco va al botón «cancelar» (por el autofocus, la opción segura); al pulsar «Borrar», la ventana se cierra sola y su returnValue vale borrar.

Cómo funciona

• showModal() abre la ventana como modal: encima de todo, con el fondo ::backdrop y el resto de la página inerte. Hay otra forma, show(), que la abre sin bloquear nada (para avisos que no exigen respuesta).
• <form method="dialog">: un formulario dentro del dialog con este método no se envía a ningún sitio; cierra la ventana y deja en returnValue el value del botón pulsado. Tu JavaScript lo lee en el evento close.
• Esc cierra la ventana, y el navegador devuelve el foco al botón que la abrió.
• aria-labelledby le da a la ventana el nombre de su título, que el lector de pantalla anuncia al abrirla.

// Qué eligió la persona
const d = document.getElementById("confirmar");
d.addEventListener("close", () => {
  if (d.returnValue === "borrar") borrarArchivo();
});

Cada fragmento de HTML de esta página pasó por el Nu Html Checker 26.11.4 (el validador del W3C) y cada resultado se pintó y se midió en Chromium, Firefox y WebKit antes de publicarla. Prueba tus cambios en el editor de HTML y CSS o aprende desde cero con el curso.