【jQuery】モーダルウィンドウのブラックアウト部分をクリックで閉じる

というわけで、タイトルだけ見るとちょっとイメージしづらいですよね。。

JSを使い、モーダルウィンドウでコンテンツを表示させるという事はよくあるかと思います。
その際、コンテンツ以外の領域はブラックアウト（もしくはホワイトアウトなど…）させたりと、区別化する表現を用いることが多いですよね。イメージ的には以下のような感じですね。

モーダルウィンドウ内においては、もちろん「閉じるボタン」を設置するかと思うのですが、ブラックアウトされている領域をクリックでも閉じる処理をさせたかったとします。
それ自体は至って簡単なのですが、モーダルウィンドウのコンテンツ部分をクリックでは閉じる処理をキャンセルさせたいですよね。

このような場合 stopPropagation() という記述を使用することにより、親要素への伝播（バブリング）をキャンセルさせることが出来るのです。
どういうことなのか、具体的にコードを交えて解説していきます！

コードによる解説

以下のようなHTML構成だったとします。

この時、普通にブラックアウト領域をクリックで閉じる処理をさせるには、以下のように記述します。

$( function(){
  // モーダル領域をクリックでフェードアウトさせる
  $( '.modal' ).click( function(){
    $( this ).fadeOut();
  } );
} );

しかし、このままですとコンテンツ部分（.modal__img）をクリックした場合でも閉じるよう処理されてしまいます。
その場合にはキャンセルさせる必要がありますね。
ここで使うのが stopPropagation() なんです！先程のコードにちょこっと追記します。

$( function(){
  // モーダル領域をクリックでフェードアウトさせる
  $( '.modal' ).click( function(){
    $( this ).fadeOut();
  } );
  // がしかし、画像をクリックでキャンセルさせる
  $( '.modal__img' ).on( 'click', function( e ){
    e.stopPropagation();
  } );
} );

コンテンツ内の画像（.modal__img）がクリックされた場合には、キャンセルさせるよう追記しています。

こうすることにより、モーダルウィンドウのコンテンツ部分をクリックした場合にはキャンセルさせるという挙動が実現できます。

今回もサンプルを別途設けましたので、併せてご確認ください！

サンプルを確認する