Cookieで制御して閉じるボタンをクリックするまで要素を表示する

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: '/' //有効にするパス
            });
        });
    }
}

参考サイト

Gimmick log
jQuery.cookie.jsでクリックしたら次回から表示させないようにする
https://gimmicklog.com/jquery/359/