クライアントから、最初のアクセスのときだけメールマガジン登録を促すウインドウを出したい、という要望がありました。
最初のアクセスかどうかの判断はjquery.cookie.jsを、モーダルウインドウの表示はjqModal.jsを使って実装してみました。
設置にあたっては、いくつかのブログエントリーを参考にさせていただきました。ありがとうございます。
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法
さて、まずheadにjsファイルと必要なCSSファイルを読み込みます。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jqModal.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <link rel="stylesheet" type="text/css" href="css/jqModal.css" />
そしてheadに開始処理を記述します。
<script type="text/javascript">
$(function(){
//cokkieのaccessの値で判定
if($.cookie("access")){//accessの値がある場合
$('#dialog').jqm();
$('#dialog').jqmHide();//modalウインドウを隠す
}else{//accessの値が無い場合
$('#dialog').jqm();
$('#dialog').jqmShow();//modalウインドウを表示する
}
$(window).load(function(){
//accessというキーで適当な値をcookieに保存。7日間有効
$.cookie("access","foo", { expires: 7 });
})
});
</script>
htmlは以下
<div class="jqmWindow" id="dialog"> <a href="#" class="jqmClose">Close</a> <p>モーダルウインドウの中身</p> </div>
全体の流れとしては、onloadでcookieにaccessというキーと値を追加して、2回目のアクセス以降はaccessの値を見て、モーダルウインドウをオンオフするという感じです。
jsModalの標準的な処理の流れとしては、表示/非表示したい要素に$(‘#id’).jqm()といった記述でjqModalを適用し、トリガーをclass名（デフォルトだとjqModal）として仕込んだaタグをクリックすると内部的にjqmShowが実行されて、該当の要素にインラインのCSSとしてdisplay:blockが挿入され、表示されるという流れのようです。
今回はonLoadで表示/非表示を扱いたかったので、$(‘#id’).jqmShow()および$(‘#id’).jqmCloseをonLoadでのif文に直接記述するという方法を取りました。
それならいっそjsModalを排し、CSSだけでオンオフしてしまう手もあると思うのですが、ウインドウ外を操作対象外にする処理や、ウインドウを閉じるリンクを機能させる処理を別に書くのが面倒だったのでjsModalを使いました。modal系のプラグインは他にもあるようですので、もっと楽な方法はあるのかもしれませんね。
ということで、いつもどおり、自分用メモ、でした。細かいところまでの動作の保証はできませんので、あしからず。