[HTML] dialog
參考資料
兩種 Dialog
<dialog> 可以分成 modal 和 non-modal dialog：
| Modal | Non-modal | |
|---|---|---|
| 操作方式 | 使用 .showModal() 開啟 modal | 使用 .show() 開啟 modal；（不建議）或使用了 open attribute |
| 特性 | 不能和頁面上的其他區域互動（除了 scroll） | 可以和頁面上的其他區域互動 |
可以透過 .close() 或 ESC 關閉 | 可以透過 .close() 關閉 | |
| 樣式 | 有 ::backdrop 和預設的樣式 | 沒有 ::backdrop |
| 實際的位置在 DOM 最外層（top-player） | 實際位置沒有改變 | |
| 預設就是置中在畫面中央（水平垂直置中） | 水平置中 |
在 Dialog 中使用 Form
送出表單的行為
當 <dialog> 裡面有 <form> 時，如果：
<form>上有使用method="dialog"，也就是<form method="dialog">- 或針對送出 form 的
<button>使用<button formmethod="dialog">
則當使用者試著送出這個表單時：
- 這個表單並不會實際被送出（submit），而是會關閉
dialog - 再次打開這個 dialog 時，上次填寫的內容依然會留著
表單中有 required 的情況
如果這個 form 裡面有 required 的 input，只有在 required value 有填的情況下，才能關閉 dialog，除非
- 主動呼叫
.close() - 使用
formnovalidate，例如<input type="submit" formnovalidate>
returnValue
預設的情況下， returnValue 會是「空字串」，或是「submit button 的 value」，例如，<button formmethod="dialog" value="foobar">Confirm</button>，則使用者按下 Confirm 是，dialog.returnValue 則會是 foobar。
要改變 dialog.returnValue 的一種做法是在呼叫 .close() 是把值傳進去，例如：dialog.close('foobar'); 則拿到的 dialog.returnValue 就會是 foobar。
點擊 modal 外面以關閉 dialog
如果你使用的是 modal，預設的情況下，點擊 modal 內容外面並不會關閉 modal，但很多情況下，我們希望能有這樣的行為。
要這麽做可以使用這段 JavaScript script：
// Source: https://blog.webdevsimplified.com/2023-04/html-dialog/
// 這個作法只能用在 modal dialog
dialog.addEventListener('click', (e) => {
const dialogDimensions = dialog.getBoundingClientRect();
if (
e.clientX < dialogDimensions.left ||
e.clientX > dialogDimensions.right ||
e.clientY < dialogDimensions.top ||
e.clientY > dialogDimensions.bottom
) {
dialog.close();
}
});
但要注意的是，這個作法只能用在 modal dialog，不能用在 non-modal dialog，因為 modal dialog 的 dialog element（包含 backdrop）會佔據整個畫面，所以監聽它的 click event 才有用；但 non-modal dialog 只有 dialog element 本身，監聽 click 只會監聽到 dialog 本身，dialog 外被點擊是不會觸發 click 事件。