modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定する方法をご紹介します。
初回ページ表示時にモーダル表示され、ページ更新してもcookieで設定した10秒間はモーダル表示エリアは再表示されません。
モーダルの再表示期間を設定する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>
modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定するデモページ
modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定するデモページ
ソース元:Modaal is a WCAG 2.0 Level AA accessible modal plugin
Modaal is a WCAG 2.0 Level AA accessible modal plugin
ソース元:jquery-cookie
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。