<button id="open">open</button>
<dialog id="dlg">
  欢迎访问个人小站：
  <a href="http://www.pengfeixc.com" target="_blank">www.pengfeixc.com</a>
  <button id="close">close</button>
</dialog>
dialog::backdrop {
  background-color: rgba(100, 10, 10, 0.7);
}

const dialog = document.getElementById("dlg");
const closeBtn = document.getElementById("close");
const openBtn = document.getElementById("open");
openBtn.addEventListener("click", () => {
  dialog.showModal();
});
closeBtn.addEventListener("click", () => {
  dialog.close();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.