CodePen Embed - HTML dialog

<button id="show">show</button>
<dialog id="infoModal">
  <p>這是 html 的 dialog!!</p>
</dialog>

dialog{
  border: none;
  box-shadow: 0 2px 6px #ccc;
  border-radius: 10px;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.1);
}

let btn=document.querySelector("#show");
let infoModal=document.querySelector("#infoModal");
btn.addEventListener("click", function(){
  infoModal.showModal();
})

This Pen is owned by deathhell on CodePen.

See more by @deathhell on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.