🖼

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

2022/05/15に公開約800字

<dialog>タグについての話

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

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

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

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

サンプルコード

以下サンプルです。

やってること

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

これだけです。

参考資料

Discussion

ログインするとコメントできます