Dos constructores vienen gratis en HTML: <dialog> para decisiones que bloquean y el atributo popover para toggles ligeros. Ambos se pintan en el top layer del navegador (por encima de cualquier z-index), se cierran con Escape y gestionan el foco.

<dialog id="confirm">
  <p>Delete this page for good?</p>
  <button id="yes">Confirm</button>
  <button id="no">Cancel</button>
</dialog>
<button popovertarget="picker">Pick</button>
<div id="picker" popover>...</div>

Lo que eliminas adoptándolas

  • Código de captura de enfoque: showModal() atrapa el enfoque mientras está abierto y lo restaura cuando está cerrado.
  • Cableado de escape y fondo: los eventos de cancelación/cierre llegan ya cableados.
  • La carrera armamentista del índice z y sus divs envolventes: ::backdrop es un selector, no un elemento.

cual elegir

  1. Una decisión que el lector debe responder antes que nada: <dialog>.showModal().
  2. Un control que abre un pequeño panel: popover. Es no modal por diseño.
  3. Ambos: pruebe primero con el teclado y luego con un lector de pantalla; el trabajo de la plataforma cubre la mayoría, no todos, los casos extremos.

Un marcado de error no puede solucionarlo: datos no guardados detrás del modal. Guarde automáticamente antes de abrir el cuadro de diálogo, porque el cierre puede ocurrir de más formas de las que su código planeó. Ése es el único estado en el que un modal enrollado a mano suele hacer bien y éste olvida.