【jQuery】初回アクセス時のみモーダル(ポップアップ)ウィンドウを開く方法

緊急のお知らせや、メールマガジン登録画面等を
サイトのアクセス時にモーダル(ポップアップ)ウィンドウとして表示する方法の紹介です。

最近ではコロナウイルスへの対応についての情報を、このモーダルウィンドウで告知しているサイトもありますし、僕の所にも実装するための見積もり相談がありました。

紹介しておいてなんですが、こういう強制的なものはユーザーに嫌がられるので多用するのは控えましょう。

今回は良さそうなものを2つピックアップしました。
DEMO 1 はアクセス時しか体験できないのご注意ください(cookieを削除したらまた見れます)。
DEMO 2 は再度モーダルウィンドウを開くボタンがあります。

DEMO 1

DEMO 2

設置方法 DEMO 1 版

DEMO 1

以下のコードを丸っとコピペで実装できます。
HTMLとCSSは参考サイトのものを少し修正しているので、
使用するサイトに合わせて変更してください。

jQueryの読み込み

公開されているCDNを<head>内に読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

jQueryの実行コード

jQueryのCDNより下に下記コードを貼り付けます。

<script type="text/javascript">
$(function(){
$(".overlay").show();
$.cookie('btnFlg') == 'on'?$(".overlay").hide():$(".overlay").show();
$(".btn_area button").click(function(){
$(".overlay").fadeOut();
$.cookie('btnFlg', 'on', { expires: 30,path: '/' }); //cookieの保存
});
});
</script>

HTML

<div class="overlay">
<div class="btn_area">
<p class="ttl">重要なお知らせ</p>
<p>ポップアップが出るのは初回のみです。</p>
<button>閉じる</button>
</div>
</div>

CSS

.overlay {
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
position: fixed;
z-index: 1
}
.btn_area {
width: 400px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
text-align: center;
z-index: 2
}
.btn_area .ttl {
font-weight: bold
}
.btn_area p {
padding: 15px
}
.btn_area button {
display: block;
margin: 0 auto;
background: #333;
color: #fff;
padding: 20px 40px;
border: none
}
.btn_area button:hover {
background: #777
}

設置方法 DEMO 2 版

DEMO 2

DEMO 2はサンプル一式が公式サイトでダウンロード出来ますが、
再配布が可能という事でしたので、僕のサーバーにもアップしました。
こちらは再度モーダルウィンドウを開くボタンがあります。

layerboard.zip

jQueryの読み込み

jQueryjquery-cookieはDEMO1版と全く同じです。
加えて、jquery.layerBoard.jsを読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="js/jquery.layerBoard.js"></script>

jQueryの実行コード 1回だけ表示バージョン

<script>
$(function(){
$('#layer_board_area').layerBoard({alpha:0.5});
})
</script>

jQuery実行コード カスタマイズバージョン

cookieの保存期間や時間経過で再度表示する等のカスタマイズをする場合は以下のコードを使います。

<script>
$(function(){
$('#layer_board_area').layerBoard({
delayTime: 100, //表示までの待ち時間
fadeTime : 300, //表示開始から表示しきるまでの時間
alpha : 0.8, //背景レイヤーの透明度
limitMin : 0, //何分経過後に再度表示するか/分(0で再表示なし)
easing: 'linear', //イージング
limitCookie : 0 , //cookie保存期間/日(0で開くたび毎回表示される)
countCookie : 1000 //何回目のアクセスまで適用するか(cookie保存期間でリセット)
});
})
</script>

HTML

サンプルのものを修正しています。

<div id="layer_board_area">
<div class="layer_board_bg"></div>
<div class="layer_board">
<p>アクセス時にモーダル(ポップアップ)ウィンドウを開く方法</p>
<a href="#" class="btn_close">閉じる</a>
</div>
</div>

<div id="wrapper">
<h1>jQuery.layerBoard.js</h1>
<p class="layer_board_btn"><a href="#">もう一度開く</a></p>
</div>

CSS

CSSもサンプルのものを修正しています。

.layer_board_bg,
.layer_board {
position: absolute;
}
.layer_board_bg {
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
top: 0;
left: 0;
display: none;
cursor: pointer;
background: #000;
}
.layer_board {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
text-align: center;
z-index: 2000;
padding: 50px
}
.layer_board p {
margin-bottom: 50px
}
.btn_close {
display: block;
text-decoration: none;
background: #000;
color: #fff;
text-align: center;
padding: 20px 40px;
width: 200px;
margin: 0 auto
}

最後に

サイトアクセス時にモーダルウィンドウを表示する方法を紹介しました。
今回のコロナ対策のような緊急を要するものや、規約や承諾のようにどうしても見て欲しいものを掲載するにはとても便利な機能です。

ですが最初にも書きましたが、
ユーザーの行動を強制してしまう(何かを見せる、クリックさせる等の)機能は離脱の原因にもなりますので、実装する際は慎重に行いましょう。