Sample List

【jQuery】モーダルのブラックアウト領域をクリックで閉じる

以下のボタンをクリックすると、モーダルウィンドウが立ち上がります。 コンテンツ内の画像をクリックでは閉じませんが、ブラックアウトしている部分をクリックすると閉じることが確認できます。

モーダルウィンドウを立ち上げる

Code

HTML

<div class="modal">
  <div class="modal__content">
    <img src="/sample/images/js003/img01.jpg" alt="" class="modal__img">
  </div>
</div>

JS

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

上記コードの赤字部分の記述により、画像自体をキャンセルでは閉じなくなります。
どのような違いがあるのか、以下のボタンをクリックで立ち上がるモーダルウィンドウより確認できます。

モーダルウィンドウを立ち上げる

画像をクリックしてもモーダルウィンドウは閉じてしまったと思います。

一覧に戻る