<!-- https://felixicaza.com/blog/aprende-a-crear-modales-sin-usar-z-index-con-el-elemento-dialog -->

<p>Ejemplo para mostrar el efecto de desefoque con la propiedad CSS <code>backdrop-filter</code>.</p>

<dialog id="modal">
  <p>Este es mi modal</p>
  <button id="btn-close">Ok</button>
</dialog>

<button id="btn">Mostrar modal</button>

/* https://felixicaza.com/blog/aprende-a-crear-modales-sin-usar-z-index-con-el-elemento-dialog */

dialog::backdrop {
  backdrop-filter: blur(4px);
  background-color: rgba(0, 0, 0, 0.5);
}

/* https://felixicaza.com/blog/aprende-a-crear-modales-sin-usar-z-index-con-el-elemento-dialog */

const modal = document.querySelector("#modal");
const btn = document.querySelector("#btn");
const btnClose = document.querySelector("#btn-close");

btn.addEventListener("click", () => {
  modal.showModal();
});

btnClose.addEventListener("click", () => {
  modal.close();
});