<section>
<button type="button" id="showModal">showModal</button>
<button type="button" id="show">show</button>
</section>
<dialog id="dialog" class="dialog">
<h2>Hello nus3!</h2>
<button type="button" id="close">Close</button>
</dialog>
.dialog::backdrop {
background: rgba(0,0,0,.25);
}
.dialog:modal {
background-color: #E7F6F2;
}
const dialog = document.getElementById("dialog");
const showBtn = document.getElementById("show");
const showModalBtn = document.getElementById("showModal");
const closeBtn = document.getElementById("close");
showBtn.addEventListener("click", () => {
dialog.show();
});
showModalBtn.addEventListener("click", () => {
dialog.showModal();
});
closeBtn.addEventListener("click", () => {
dialog.close();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.