使用 HTML 原生的 dialog，讓製作彈出視窗更簡單

HTML 的 dialog 是一個新的標籤，如同其語意，可以讓我們更輕鬆製作可以和使用者互動的提示訊息框。

首先看一下 HTML 會是長這樣：

<dialog open>
  <p>這是 html 的 dialog!!</p>
</dialog>

實際的 UI 就會是像這樣，可能會因瀏覽器有異。

可以簡單地替 dialog 設定樣式：

dialog{
  border: none;
  box-shadow: 0 2px 6px #ccc;
  border-radius: 10px;
}

dialog 有一個 open 的 attribute，當拿掉的時候就會看不到，這時可以透過 JavaScript 的方法 showModal() 以及 close() 來開啟或關閉 dialog：

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

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

注意如果是 firefox 的話，需要到 about:config 設定 dom.dialog_element.enabled 為 true 才能運作。

要關閉的話按 esc 鍵即可，或是加上事件去觸發 close() 。

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