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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.