まずはデモをご確認くださいな

 

ソースコード

 

scriptを一応解説

$(".overlay-btn-sample").click(function()

クラス名"overlay-btn-sample"をクリックすると発動するよ！
使用する場合は、ボタンのクラス名を入れて|дﾟ)

$(".overlayall-sample").fadeIn();

クラス名"overlayall-sample"をフェードインするよ！

$(".overlayall-sample").click(function()

オーバーレイ表示したボックスをクリックすると発動！

$(".overlayall-sample").fadeOut();

クラス名"overlayall-sample"をフェードアウトするよ！

 

cssを一応解説

.overlayall-sample {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: scroll;
top: 0;
left: 0;
z-index: 100;
background: rgba(0,0,0,0.9);
}

オーバーレイ表示するために必要なcss。position:fixed;z-index:100;で上書きするような感じでごぜえます。

 

使い道

私的にはオーバーレイって結構使えると思うんですよね！例えば、利用規約や特商法ページ。わざわざ別ページで開く必要がないコンテンツに関してはオーバーレイでもいいよね！

ちなみにメモリネイターではスマホのメニューにオーバーレイを使ってます。一般的なスライドインのスマホメニューでもいいんですが、オーバーレイの方がより使いやすかったので採用しました。