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

<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[open] {
  animation: show 1s ease normal;
}

dialog.hide {
  animation: hide 1s ease normal;
}

@keyframes show {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes hide {
  to {
    transform: scale(0);
  }
}

/* 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.classList.add("hide");

  modal.addEventListener("animationend", function close() {
    modal.classList.remove("hide");
    modal.close();
    modal.removeEventListener("animationend", close);
  });
});