Cookieで制御して閉じるボタンをクリックするまで要素を表示する
- 2020.08.12
- Coding JavaScript
- Cookie
Cookieをちゃんと使ったことがなかったので、参考サイトをベースに作成してみました。
実装したい仕様としては、下記になります。
・ウェブサイト内に、チュートリアルのモーダルウィンドウを表示する
・チュートリアルは複数ページに必要
・各モーダルは[閉じる]ボタンを押すことで消せる
・一度消したモーダルはCookieが消えるまで再表示しない
モーダルは表示できていたので、必要なのは下記の2点。
・モーダルの閉じるボタンでCookieを保存
・Cookieはモーダルごとに判別
◆htmlの作成
<div class="c-modal js-modal-tutorial"> <a href="#" class="js-modal-tutorial-close">閉じる</a> ※モーダルのデザインなどは略。 ※ポップアップするベースの要素・・・js-modal-tutorial ※閉じるためのボタン・・・js-modal-tutorial-close </div>
◆必要なjsの読み込み
・本体を読み込む
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
・本体より下に、jquery.cookieを読み込む
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
◆jsの作成
$(function () { if ($('.js-modal-tutorial').length === 1) { //ページ内にjs-modal-tutorialが存在するかチェック var url = location.href; // ページのURLを取得 if ($.cookie('tutorial-' + url) != 'on') { // Cookieを持っているか確認 $('.js-modal-tutorial').fadeIn(); // Cookieを持っていない場合、モーダルを表示 } //隠すボタンをクリックしたらモーダルを隠す $('.js-modal-tutorial-close').click(function() { // closeボタンを押す $('.js-modal-tutorial').fadeOut(); // モーダルの非表示 $.cookie('tutorial-' + url, 'on', { // Cookieを保存 //cookieにURLをベースにonという値をセット expires: 10, //cookieの有効日数 path: '/' //有効にするパス }); }); } }
参考サイト
-
前の記事
WordPressの通知非表示処理のエラー[php7.2以降] 2020.07.13
-
次の記事
Vue.jsでのCookieの使用 2020.08.18