🖼
<dialog>要素に「ダイアログの外側クリックで閉じる」処理の追加
<dialog>タグについての話
HTMLには、<dialog>という要素があります。この要素を使うと、画面上にダイアログ、あるいはモーダルウィンドウを表示できます。また、この要素には、
- ダイアログを開く・閉じる
- ダイアログを閉じる際、ダイアログ内で入力した値を取り出す
といった機能が搭載されており、これらを利用することで自前のダイアログを容易に作成できます。
しかしながら、ダイアログの機能によくある、「ダイアログの外側のグレーアウトした部分をクリックしたら閉じる」機能は搭載されていないため、これは自作する必要があります。
サンプルコード
以下サンプルです。
やってること
- <dialog>の中に適当なブロック要素（今回は<div id="dialog-container">）を追加
- dialog-containerの中に、ダイアログを表示する要素を実装
- ダイアログのクリックイベントの中で、closest()を使ってクリック位置の祖先要素を取得し、dialog-containerでなければダイアログを閉じる
これだけです。
Discussion