jquery-cookieを使い、初回ログイン時と、１ヶ月以上ログインしなかったユーザーにだけチュートリアルビデオをモーダルで表示するプログラムを書いた。
jquery-cookieプロジェクトは2016年11月現在js-cookieに移行しているので、こちらを利用したバージョンも追記できれば…。

dashbord.html


  
チュートリアル・ビデオをもう一度見る

function.js

$(function() {
      var $X_modal = 0;
      var $Y_modal = 0;
      var $modal_content = $("#modal-content");
      var $modal_overlay = $("#modal-overlay");
      if ($('#dashboard').length) {
        if ($.cookie('tutorialVideo') !== 'on') {
          $(window).on('load', function() {
            overlayCheck();
          });
        }
      }
      $("#modal-open").on('click', function() {
        overlayCheck();
      });

      function overlayCheck() {
        $(this).blur();
        if ($modal_overlay[0]) {
          return false;
        }

        var dElm = document.documentElement,
          dBody = document.body;
        $X_modal = dElm.scrollLeft || dBody.scrollLeft;
        $Y_modal = dElm.scrollTop || dBody.scrollTop;
        $("#main").append('');
        $("#modal-overlay").fadeIn();

        centeringModal();

        $modal_content.fadeIn();

        $("#modal-overlay,#modal-close").on('click', function() {

          window.scrollTo($X_modal, $Y_modal);

          $("#modal-content,#modal-overlay").fadeOut(function() {
            $.cookie('tutorialVideo', 'on', { //cookieにtutorialVideoという名前でonという値をセット
              expires: 30, //cookieの有効日数
              path: '/' //有効にするパス
            });
            $modal_overlay.remove();
          });
        });
      }

      $(window).resize(centeringModal);

      function centeringModal() {

        var w = $(window).width();
        var h = $(window).height();

        var cw = $modal_content.outerWidth();
        var ch = $modal_content.outerHeight();

        $modal_content.css({
          "left": (w - cw) / 2 + "px",
          "top": (h - ch) / 2 + "px"
        });
      }
});

所感

Qiitaの仕様変更で「ストック」が「いいね」と「ストック」にわかれたけど前の方が好きだった…。「いいねもせずにストックはマナー違反」とかありそうで怖い。

参考

元記事はこちら

「jquery-cookieを使い、初回ログイン時と、１ヶ月以上ログインしなかったユーザーにだけチュートリアルビデオをモーダルで表示する」