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

モーダル表示は、ユーザーインターフェースをよりインタラクティブかつ魅力的にするための効果的な手法です。
本記事では、modaal.jsとjquery.cookie.jsを活用して、モーダルウィンドウの再表示期間を設定する方法について詳しく解説します。
この仕組みを実装することで、初回ページ表示時にモーダルを表示し、指定した期間中は再度表示されないように制御できます。

実際に試せるデモページや、初心者にもわかりやすい手順を用意しましたので、ぜひ最後までご覧ください。

Contents

モーダルの再表示期間を設定するCSSの記述
モーダルの再表示期間を設定するHTMLの記述
modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定するJavaScriptの記述
modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定するデモページ
関連リソース
まとめ

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

まずはモーダルの外観を整えるためのCSSを設定します。
modaal.min.cssファイルを読み込みます。モーダルエリア（#modalarea）とモーダル表示時（.modaal-container）幅やcloseボタン（.modaal-close）のCSS記述です。
以下の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の記述

次に、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の記述

以下はJavaScriptのコードです。jquery.min.js（1系）、modaal.min.js、jquery.cookie.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>