jQuery・CSSでオーバレイを実装|半透明の箇所をクリックしても非表示に

今回は、jQueryとCSSを使用し、指定した箇所をクリックしたら、全画面を覆うオーバーレイを表示するシンプルで簡単な例となります。

オーバーレイの例

例では、「Click」ボタンをクリックすると全画面を覆うオーバーレイが表示され、オーバーレイ内の「Close」ボタンをクリックすると非表示にします。

オーバーレイのレイアウトでは、中心にあるテキストを表示する箇所と、その外側にある半透明の箇所があり、半透明の箇所をクリックしても、オーバーレイを非表示にします。

See the Pen JLNzXb by yic666kr (@yic666kr) on CodePen.

ソースコードについて

以下は、ソースコードのポイントとなる箇所の説明となります。

オーバーレイのCSS

全画面を覆うオーバーレイのCSSは、id="overlay"の要素に指定し、デフォルトでは非表示にします。

例のCSSでの箇所

#overlay{
	/*オーバーレイのCSS*/
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height:100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

オーバーレイの表示・非表示|.fadeIn()、.fadeOut()

オーバーレイの表示・非表示は、jQueryを使い、指定した要素をクリックすると、.fadeIn()、.fadeOut()メソッドで、オーバーレイの要素をそれぞれ表示・非表示にしています。

例のjQueryでの箇所

jQuery(function($){
    $("#open-btn").click(function() {
        $("#overlay").fadeIn(); 
    });
    $(".close").click(function() {
        $("#overlay").fadeOut();
    });

	// 以下省略
});

半透明の要素をクリックして非表示にする|バブリングを停止

jQueryでは、クリックイベントが指定されている要素の子要素をクリックしても、イベントが発生してしまいます。このことをバブリングといい、このバブリングを停止するために、イベントを発生させたくない子要素に、.stopPropagation( )メソッドを指定します。

例のjQueryでの箇所

jQuery(function($){
    // 上略
    
    // バブリングを停止
    $(".overlay-inner").click(function(event){
        event.stopPropagation();
    });
});

今回の例では、半透明の箇所をクリックしても非表示になるように、id="overlay"の要素にもクリックイベントを指定しています。

しかし、それだけでは、その子要素(class="overlay-inner"の要素)をクリックしても、イベントが発生し非表示となっていまいます。そのため、class="overlay-inner"の要素に、.stopPropagation( )メソッドを指定して、バブリングを停止し、イベントの発生を止めています。

参照サイト・書籍

jQuery リファレンス:stopPropagation

コメントまたはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。Twitterで返信する場合はコチラから。