modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定する方法｜DAD UNION

modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定する方法をご紹介します。
初回ページ表示時にモーダル表示され、ページ更新してもcookieで設定した10秒間はモーダル表示エリアは再表示されません。

Contents

モーダルの再表示期間を設定するCSSの記述
モーダルの再表示期間を設定するHTMLの記述
modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定するJavaScriptの記述
modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定するデモページ
ソース元：Modaal is a WCAG 2.0 Level AA accessible modal plugin
ソース元：jquery-cookie

モーダルの再表示期間を設定するCSSの記述

※modaal.min.cssファイルを読み込みます。モーダルエリア（#modalarea）とモーダル表示時（.modaal-container）幅やcloseボタン（.modaal-close）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" type="text/css" href="modaal.min.css">
<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding-top: 20px;
}
h2{
  font-size: 18px;
}
p{
  padding-bottom: 10px;
  font-size: 18px;
}
#modalarea{
  display: none;
}
.modaal-container{
  max-width: 90%;
  text-align: center;
}
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#333;
}
</style>

モーダルの再表示期間を設定するHTMLの記述

※モーダルエリア（id=”modalarea”）とモーダル表示用リンクを用意します。

<h1>modaal.jsとjquery.cookie.jsを使って初回モーダル表示以降cookie期間だけ再モーダル表示しません。</h1>
<p>初回ページ表示時にモーダル表示され、ページ更新してもcookieで設定した10秒間はモーダル表示エリアは再表示されません。<br>「モーダル表示リンク」をクリックするとモーダル表示します。</p>


<div><a href="#modalarea" class="modal">モーダル表示リンク</a></div>
  
<section id="modalarea">
  <h2>モーダルエリア</h2>
  <p>モーダル表示エリアです。</p>
</section>

modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定するJavaScriptの記述

※jquery.min.js（1系）、modaal.min.js、jquery.cookie.jsファイルを読み込みます。cookieのキー（pview）にモーダル再表示期間（10秒後）を設定し、$(“モーダル表示トリガーリンクclass”).modaal({オプション})を記述します。オプションではスピード、背景色、透明度等を設定します。モーダルをページロード時に表示するかどうかのオプション設定start_open（true/false）にcookieで設定した期間だけfalseをそれ以外はtrueを設定（変数flg）します。

<script src="jquery.js"></script>
<script src="modaal.min.js"></script>
<script src="jquery.cookie.js"></script>
<script type="text/javascript">
let date = new Date();
date.setTime( date.getTime() + ( 10 * 1000 )); //10秒
var pview = $.cookie('pview');

if(!pview){
  flg = true;
  $.cookie('pview', false, { expires: date }); //10秒間cookie設定
}else{
  flg = false  
}

//モーダル表示
$(".modal").modaal({
  start_open:flg,
  overlay_close:true,
  before_open:function(){
    $('html').css('overflow-y','hidden');
  },
  after_close:function(){
    $('html').css('overflow-y','scroll');
  }
});
</script>