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

<p>Elemento HTML Dialog usando el método .showModal(). Este texto no puede ser seleccionado cuándo el modal está abierto.</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 */

/* 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();
});