<!-- https://felixicaza.com/blog/aprende-a-crear-modales-sin-usar-z-index-con-el-elemento-dialog -->
<p>Elemento HTML Dialog usando el método .show(). Este texto 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.show();
});
btnClose.addEventListener("click", () => {
modal.close();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.