之前要在網頁上做到彈跳視窗，我都直覺想到要用一些外掛套件，像是 jQuery Dialog 或是 jQuery Modal
然後必須要引入一些 library ，最近有需要看一下，發現故事變了，原來現在已經可以用 dialog 了
原因很簡單：Safari。
Safari 以前不支援 <dialog>，大家都怕踩雷，但從 iOS / macOS Safari 15.4（2022/03/14） 之後正式支援
這表示 2025 年的今天可以放心使用 <dialog>
不需要再引入任何的 library 就可以辦到
我直接給程式碼，這是我現在最常用的版本
功能簡單可讀性高、不用任何第三方依賴
<button id="openDialogBtn">開啟對話框</button>
<dialog id="checkoutDialog">
<form method="dialog">
<p>請輸入您的名稱：</p>
<input type="text" id="usernameInput" placeholder="輸入名稱…" />
<div style="margin-top: 16px; text-align: right;">
<button value="cancel">取消</button>
<button value="confirm">送出</button>
</div>
</form>
</dialog>
<script>
const dialog = document.getElementById('checkoutDialog');
const openBtn = document.getElementById('openDialogBtn');
// 按下按鈕 → 打開 dialog
openBtn.addEventListener('click', () => {
dialog.showModal();
});
// 你也可以監聽 dialog 的關閉事件（例如取得 input 值）
dialog.addEventListener('close', () => {
if (dialog.returnValue === "confirm") {
const name = document.getElementById('usernameInput').value;
alert("使用者輸入："+name);
}else{
alert(dialog.returnValue);
}
});
</script>result:
結論:
1. showModal() 幫你處理一堆麻煩
背景阻擋、焦點管理、自動 ESC 關閉。
你不用寫任何 code，全部原生搞定。
2. method="dialog"
按哪個按鈕，dialog.returnValue 就返回哪個 value。
不需要寫 click handler，不用 preventDefault()
不用管理 state他就會自動關閉。
3. 不用外部依賴
基於這三個理由，跟程式碼簡潔程度，不用不行了...爽
--
本文原文首發於我的個人部落格：Safari 15.4 後原生支援 <dialog>：前端不再需要外部 Modal 套件
--
---
Yesterday I wrote down the code. I bet I could be your hero. I am a mighty little programmer.
