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

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

また、jQueryを利用しないでオーバレイを実装する方法については以下のリンク先を参考にしてみてください。

jQuery・CSSでオーバーレイを実装する例

以下、jQuery・CSSを利用したオーバーレイの例となります。

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

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

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

jQueryについて

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

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

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

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

	// 以下省略
});

バブリングを停止

DOMでは、ある要素にイベントが発生した場合、先祖要素に向かってイベントが伝わります。このことをバブリングといい、例えばクリックイベントを持つ要素をクリックした場合、その親要素にも同じクリックイベントが発生します。

このバブリングを停止するには、イベントを伝播させたくない要素のイベントに対して、イベントオブジェクトのstopPropagationメソッドを呼び出します。

次のjQueryの箇所では、オーバーレイ内のテキストを表示する要素(class="overlay-inner"を持つ要素)のクリックイベントに対して、stopPropagationメソッドでバブリングを停止しています。

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

CSSについて

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

オーバーレイのCSS

次の箇所では、idの値にoverlayをもつ要素に対して、position: fixed; などでオーバレイを作成しています。また、デフォルトではdisplay: none;で非表示にしています。

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

width・heightの値に指定したvw・vh の単位については、以下のリンク先を参考にしてみてください。

オーバレイ内の要素を上下左右の中央揃え

次の箇所では、オーバレイ内の要素を上下左右の中央揃えにするためにFlexbox(フレックスボックス)を利用しています。

.flex{
	/*オーバーレイ内の要素を上下・左右中央揃え*/
	width: 100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center; 
}

Flexboxでの中央揃えの詳細やベンダープレフィックスを指定する例などは、以下のリンク先を参考にしてみてください。

参考サイトなど

jQuery リファレンス:stopPropagation

コメント投稿コメント投稿欄を開く

コメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

また、多忙によりコメントには返信できない場合があります。

Twitterで返信する場合はこちらから。