JavaScript

認証ポップアップ機能をjs-cookieを使って実装してみました

更新日:

夜のお店の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のドキュメントです。

-JavaScript

Copyright© Code Custom , 2022 All Rights Reserved.