HTML Demos

Demo en vivo

showModal() — bloquea la página, atrapa el foco, cierra con Escape.

show() — no bloquea, sin backdrop, no se cierra con Escape.

returnValue — el value del botón que cerró el dialog, útil para saber qué eligió el usuario.

Código importante

copiar<!-- El dialog en el HTML -->
<dialog id="mi-modal">
  <h2>Título</h2>
  <p>Descripción del modal</p>

  <!-- method=dialog cierra SIN JS -->
  <form method="dialog">
    <button value="confirm">Confirmar</button>
    <button value="cancel">Cancelar</button>
  </form>
</dialog>

<!-- Abrir desde JS -->
const d = document.getElementById('mi-modal')

d.showModal()  // modal: bloquea + backdrop
d.show()       // no-modal: sin bloquear

d.close()      // cerrar desde JS
d.close('ok')  // cerrar con returnValue

<!-- Leer qué botón pulsó el usuario -->
d.addEventListener('close', () => {
  console.log(d.returnValue)
  // "confirm" o "cancel"
})

<!-- Estilar el backdrop -->
dialog::backdrop {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}

<!-- Cerrar al clicar fuera (backdrop) -->
dialog.addEventListener('click', e => {
  if (e.target === dialog) dialog.close()
})