夜のお店のHP等でよく見かける、ページに最初訪れた場合、「ENTER」を押して入場するページがあると思うのですが、ポップアップ風(cssとjavascript)で実装してみましたので、参考にしていただければ幸いです。
ENTERポップアップ完成
こちらに実装してみました。動きを確認してみてください。
実際のコード
<div class="modal">
<p><img src="./img/logo.png" alt=""></p>
<p>ENTERを押すと、1時間は表示されません。<br>
クッキー削除で再度表示されます。</p>
<a class="close_modal"><img src="./img/enter.png" alt="ENTER"></a>
<a href="//wbscustom.com/"><img src="./img/exit.png" alt="EXIT"></a><br>
<img src="./img/18.png" alt="">
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
<script type="text/javascript">
$(function () {
$('.close_modal').on('click', function() {
Cookies.set('enter', 'on', {expires: 1/24});
$('.modal').css('display', 'none');
$('#back div').css('display', 'none');
});
//cookieの値がonじゃなかったら表示させる
const enter = Cookies.get('enter');
if (enter != 'on') {
$('.modal').css('display', 'block');
$('#back div').css('display', 'block');
}
});
</script>
<div id="back">
<div style="position: fixed; z-index: 100; top: 0px; left: 0px; height: 100%; width: 100%; background: rgb(0, 0, 0); opacity: 0.9;display: none;"></div>
</div>
/************************************************************
モーダルウィンドウ
************************************************************/
.modal {position: fixed;display: none;z-index: 9999;top: 40%;left: 50%;width: 320px;height: 275px;margin: -135px 0 0 -170px;padding: 10px;color: #FFF;text-align: center;border: 1px solid #0d7a5f;border-radius: 10px;}
.modal img { vertical-align: bottom; }
.modal p { font-size: 12px; line-height: 1.6em; margin-bottom: 10px; }
.modal ul { text-align: center; }
.modal li { display: inline; }
.modal a { cursor: pointer; }
日数設定
Cookies.set('enter', 'on', {expires: 1/24});
上記のexpires: 1/24の数字を変更する事で、クッキー期間を指定できます。
例:30なら30日、1なら1日、1/12なら12時間、1/24なら1時間。
参考
今回利用したjs-cookieのドキュメントです。