jquery-cookieを使い、初回ログイン時と、１ヶ月以上ログインしなかったユーザーにだけチュートリアルビデオをモーダルで表示するプログラムを書いた。
jquery-cookieプロジェクトは2016年11月現在js-cookieに移行しているので、こちらを利用したバージョンも追記できれば…。
dashbord.html
<section id="section">
<p><a id="modal-open" class="button-link">チュートリアル・ビデオをもう一度見る</a></p>
<div id="modal-content">
<video src="video/login/tutorial.mp4" autoplay controls></video>
<a id="modal-close" class="button-link"><span class="is-hidden">閉じる</span></a>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha256-/SIrNqv8h6QGKDuNoLGA4iret+kyesCkHGzVUUV0shc="
crossorigin="anonymous"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/function.js"></script>
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('<div id="modal-overlay"></div>');
$("#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の仕様変更で「ストック」が「いいね」と「ストック」にわかれたけど前の方が好きだった…。「いいねもせずにストックはマナー違反」とかありそうで怖い。