ホームページ制作 漫画で説明

効果が実感できる、ユーザーの記憶に残る制作なら「Memorynator」

0776-65-9795

営業時間 10:00~18:00

オーバーレイ表示

【コピペOK】オーバーレイ表示+どこをクリックしても消えるjavascript

スポンサードリンク

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

DEMO⇒


 

ソースコード

 

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;で上書きするような感じでごぜえます。

 

使い道

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

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

 

オーバレイ表示だ!イェーイ

どこをクリックしても消えるよ!

 - ホームページ・ウェブサイト制作

この記事の執筆者:

-->