dialog.requestClose()
requestClose() は HTMLDialogElement インターフェイスのメソッドで、<dialog> を閉じる要求を行います。 引数としてオプションの文字列を渡すことができ、これによりダイアログの returnValue が更新されます。
このメソッドは、HTMLDialogElement.close() メソッドとは異なり、close イベントを発生させる前に cancel イベントを発生させます。 製作者は、cancel イベントのハンドラー内で Event.preventDefault() を呼び出すことで、ダイアログは閉じることを防止できます。
このメソッドは、ダイアログの内部クローズ監視機能と同じ動作を公開します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 134 | 134 | 139 | 18.4 | 134 | 18.4 | |
基本構文
JAVASCRIPT
const dialog = document.getElementById('myDialog');
// Close request that can be canceled
dialog.addEventListener('cancel', (e) => {
if (!confirm('Are you sure you want to close this?'')) e.preventDefault();
});
dialog.requestClose();ライブデモ
Basic request close
Call requestClose on a dialog and fall back to close when the method is unavailable.
プレビュー全画面表示
Intercept the cancel path
Listen for the cancel event before allowing the close request to complete.
プレビュー全画面表示
実務での使いどころ
-
dialog.requestClose() の活用
requestClose() は HTMLDialogElement インターフェイスのメソッドで、<dialog> を閉じる要求を行います。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。