【jQury】メニューやモーダル以外の場所をクリックすると閉じる実装方法

サンプル

色々なサイトを見ているとたまに出くわす機能。

スマホでサイトを閲覧しているときだとメニューやモーダルの閉じるボタンをわざわざ押さなくても良いのでなかなか便利。

サンプルはモーダルのみだが、メニューなどにも応用できるはず。

ソースコード

HTML
CSS
jQuery

“$(document).~”でイベントを拾った場合、クリックした場所のDOMツリーにおける「葉」(親・子・孫・…の関係で言うところの末端の子孫)を見に行くので、クリックした場所がウィンドウ以外(= 背景の”.modal”)なのかどうかを判断できる。

一方で、”$(‘.class_name’).click()”だとクリックした場所に当該要素があるかどうかしか見ないので、例えウィンドウ内をクリックしたとしてもその後ろには”.modal”があるので反応してしまう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です