使用 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();
})

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。