クッキーを使って、おしゃれなモーダルウィンドウを実装出来る「SIMPLE MODAL」をページ表示時に１回だけ実行する方法

前回の記事に続いて、今回はクールなモーダルウィンドウを簡単に設置出来るJavaScriptのプラグイン「SIMPLE MODAL」をページ表示時に１回だけ実行する方法です。

前回のコードだと、ページにアクセスするたびにモーダルウィンドウが表示されますが、今回はクッキーを使って一度表示させるとブラウザを閉じるまで表示させないようにします。

window.addEvent("domready", function(){

	if(!Cookie.read('modal-image')){
		Cookie.write('modal-image', true); 

		/* Modal Image */
		var SM = new SimpleModal({
			"onAppend":function(event){
				$("simple-modal").fade("hide").fade("in")
			}
	        });

		SM.show({
			"model":"modal-ajax",
			"title":"Modal Lightbox",
			"param":{
			"url":"assets/images/lightbox.jpg",
			"onRequestComplete": function(){ }
			}
		});
	}
});

以下のコードで一度アクセスしたか判定します。

if(!Cookie.read('modal-image')){}

新規のアクセスの場合、以下のコードでクッキーにアクセスログを追加します。

Cookie.write('modal-image', true);

以上で一度アクセスするとモーダルウィンドウが表示されないように設定出来ました。cookieの有効期限を設定していないので、ブラウザを閉じるとクッキーが破棄され、次回アクセスした時に再度モーダルウィンドウが表示されます。