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

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

オーバーレイの例

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

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

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

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

CSSについて

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

オーバーレイのCSS

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

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

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

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

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

Flexboxでの上下・左右中央揃えの詳細は、以下のリンク先を参考にしてみてください。

また、Flexboxに関するベンダープレフィックスを指定する場合、PostCSSが便利です。詳しくは以下のリンク先を参考にしてみてください。

jQueryについて

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

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

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

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

	// 以下省略
});

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

DOMでは、ある要素にイベントが発生した場合、先祖要素に向かってイベントが伝わります。そのため、子要素をクリックした場合でも、親要素のクリックイベントが発生します。

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

次のjQueryの箇所では、オーバーレイ内のテキストを表示する箇所に、stopPropagationメソッドを指定しバブリングを停止しています。

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

今回の例では、オーバレイの半透明の要素をクリックしても非表示になるように、クリックイベントを指定しています。

しかし、それだけでは、その子要素(class="overlay-inner"の要素)をクリックしても、イベントが発生し非表示となっていまいます。

そのため、class="overlay-inner"の要素に、stopPropagation( )メソッドを指定しバブリングを停止することでイベントの伝播を止めています。

参考サイトなど

jQuery リファレンス:stopPropagation

コメント投稿またはTwitterで返信

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

また、コメントは承認制となります。