【コピペOK】オーバーレイ表示+どこをクリックしても消えるjavascript
スポンサードリンク
目次
まずはデモをご確認くださいな
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<div class="overlayall-sample"> <p>sample text</p> <p>sample text</p> </div> <div class="overlay-btn-sample"> <p>DEMO⇒</p> </div> <style> .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); } .overlayall-sample p{ color: #FFF; text-align: center; font-size: 30px; margin-top: 100px; line-height: 32px; } .overlay-btn-sample p{ background-color: #333; padding: 15px 20px; width: 100px; text-align: center; color: #FFF; } </style> <script> $(function() { $(".overlay-btn-sample").click(function() { $(".overlayall-sample").fadeIn(); /*ふわっと表示*/ }); $(".overlayall-sample").click(function() { $(".overlayall-sample").fadeOut(); /*ふわっと消える*/ }); }); </script> |
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;で上書きするような感じでごぜえます。
使い道
私的にはオーバーレイって結構使えると思うんですよね！例えば、利用規約や特商法ページ。わざわざ別ページで開く必要がないコンテンツに関してはオーバーレイでもいいよね！
ちなみにメモリネイターではスマホのメニューにオーバーレイを使ってます。一般的なスライドインのスマホメニューでもいいんですが、オーバーレイの方がより使いやすかったので採用しました。
公開日：
最終更新日：2018/04/05