<dialog>要素に「ダイアログの外側クリックで閉じる」処理の追加

<dialog>タグについての話

HTMLには、<dialog>という要素があります。この要素を使うと、画面上にダイアログ、あるいはモーダルウィンドウを表示できます。また、この要素には、

• ダイアログを開く・閉じる
• ダイアログを閉じる際、ダイアログ内で入力した値を取り出す

といった機能が搭載されており、これらを利用することで自前のダイアログを容易に作成できます。

しかしながら、ダイアログの機能によくある、「ダイアログの外側のグレーアウトした部分をクリックしたら閉じる」機能は搭載されていないため、これは自作する必要があります。

サンプルコード

以下サンプルです。

やってること

• <dialog>の中に適当なブロック要素（今回は<div id="dialog-container">）を追加
• dialog-containerの中に、ダイアログを表示する要素を実装
• ダイアログのクリックイベントの中で、closest()を使ってクリック位置の祖先要素を取得し、dialog-containerでなければダイアログを閉じる

これだけです。

参考資料

• <dialog>: ダイアログ要素 - HTML: HyperText Markup Language
• 【JavasScript】モーダルでの枠外をクリックしたら発火させる方法