<dialog closedby>
closedBy は HTMLDialogElement インターフェイスのプロパティで、関連付けられた <dialog> 要素を閉じるために使用できるユーザー操作の種類を示します。これはダイアログの closedby 属性値を設定したり返したりします。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 134 | 134 | 141 | | 134 | | |
| HTML 属性 | ||||||
closedby | 134 | 134 | 141 | | 134 | |
基本構文
HTML
<!-- ESCキーや外部クリックで閉じない -->
<dialog closedby="none" id="important">
<p>Important Message</p>
<button onclick="this.closest('dialog').close()">OK</button>
</dialog>ライブデモ
Dialog close sources
Compare dialog markup that declares which actions are allowed to close it.
プレビュー全画面表示
Guarded action dialog
Show a dialog that only closes from the explicit action button in the demo.
プレビュー全画面表示
実務での使いどころ
-
<dialog closedby> の活用
closedBy は HTMLDialogElement インターフェイスのプロパティで、関連付けられた <dialog> 要素を閉じるために使用できるユーザー操作の種類を示します。
注意点
- 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。