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