[JS]SimpleModalとjQuery Cookieによる認証ボックスの実装方法

jQueryプラグイン・ライブラリ

2012.07.23

18禁サイトのように、サイト訪問時に年齢確認などのアラートボックスを表示させ、「認証」ボタンを押したら次回のアクセス時からはアラートを出さないようにする、という処理のご紹介です。

jQuery プラグインのダウンロード
1. SimpleModal のダウンロード
2. jQuery Cookie のダウンロード
SimpleModal と jQuery Cookie の設置
Javascript の記述例
HTMLの記述例
CSSの記述例（アラートボックスのデザイン）
年齢認証アラートのサンプル

jQuery プラグインのダウンロード

アラートボックスにはSimpleModalを利用し、jQuery CookieでCookie に保存する仕組みになりますので、それぞれ必要なファイルをダウンロードしておきます。

SimpleModal のダウンロード

以下のページからSimpleModalのファイルをダウンロードします。
SimpleModal

jQuery Cookie のダウンロード

jQuery Cookieのファイルはこちらからダウンロードします。
jQuery Cookie

SimpleModal と jQuery Cookie の設置

jqueryファイルと一緒にjquery.cookie.jsとjquery.simplemodal.1.4.2.min.js のファイルを設置します。

<script src="./jquery.min.js"></script>
<script src="./jquery.cookie.js"></script>
<script src="./jquery.simplemodal.1.4.2.min.js"></script>

以下JavascriptとHTML、CSSの記述例の紹介になりますが、こちら↓にデモサイトを用意していますので、参考にしながら確認いただければと思います。

年齢認証アラートボックスのサンプル

Javascript の記述例

まずはjavascriptの記述ですが、KLUTCHE様のブログ記事で紹介されているコードを記述します。

<script>$(document).ready(function(){
	var over18 = jQuery.cookie('over18');
	if(over18 !== "Yes"){
		confirm();
	}
	$('.remove_cookie').click(function(){
		$.cookie('over18','',{ expires: 0 });
		location.reload();
	});
});

function confirm(){
	jQuery('#modal').modal({
		opacity:80,
		overlayCss:{backgroundColor:"#000"},
		containerId: 'confirm_modal',
		position: ["30%",],
		onShow: function(dialog){
			var modal = this;
			jQuery('.yes',dialog.data[0]).click(function(){
				var clifetime = new Date();
				clifetime.setTime(clifetime.getTime()+(2*60*60*1000));//2時間
				jQuery.cookie('over18','Yes',{ expires: clifetime });
				modal.close();
			});
		}
	});
}
</script>

var over18 = jQuery.cookie('over18');

if(over18 !== "Yes"){

confirm();

}

$('.remove_cookie').click(function(){

$.cookie('over18','',{ expires: 0 });

location.reload();

});

function confirm(){

jQuery('#modal').modal({

opacity:80,

overlayCss:{backgroundColor:"#000"},

containerId: 'confirm_modal',

position: ["30%",],

onShow: function(dialog){

var modal = this;

jQuery('.yes',dialog.data[0]).click(function(){

var clifetime = new Date();

clifetime.setTime(clifetime.getTime()+(2*60*60*1000));//2時間

jQuery.cookie('over18','Yes',{ expires: clifetime });

modal.close();

});

}

});

}

</script>

アラートボックスの設定や、Cookieの削除に関する処理を行っています。

HTMLの記述例

続いてHTMLファイルでは、アラートボックス内のタイトルやテキスト、ボタンなどを用意しておきます。

<a class="remove_cookie">Cookie削除</a>
<div id="modal">
<p>このサイトは成人向けの情報を含みますので、<br />
18歳未満の方の閲覧を固くお断りいたします。<br />
<br />
あなたは18歳以上ですか？</p>
<ul>
    <li><a class="yes">Yes</a></li>
    <li><a class="no" href="https://webantena.net/javascriptjquery/simplemodal-authbox/">No</a></li>
</ul>
</div>

<a class="remove_cookie">Cookie削除</a>

<p>このサイトは成人向けの情報を含みますので、<br />

18歳未満の方の閲覧を固くお断りいたします。<br />

<br />

あなたは18歳以上ですか？</p>

<ul>

</ul>

</div>

CSSの記述例（アラートボックスのデザイン）

アラートボックス（#modal 要素）はdisplay:noneで非表示にしておきますが、その他のデザイン部分はサイトに合わせてカスタマイズしてみてください。

#modal 		{
	display:none
}

#confirm_modal	 {
	width:450px;
	background:#efefef;
	padding:30px;
	border:1px #ddd solid;
	-webkit-border-radius:10px;
	-mozborder-radius:10px;
	border-radius:10px;
}

#confirm_modal ul	{
	text-align:center;
	margin:10px auto;
}
	
#confirm_modal ul li	{
	display:inline-block;
	/display:inline;
	/zoom:1;
	padding:0 10px;
}

#confirm_modal ul li a	{
	display:block;
	-webkit-border-radius:4px;
	-mozborder-radius:4px;
	border-radius:4px;
	padding:5px 10px;
	text-align:center;
	cursor:pointer;
	text-decoration:none
}

#confirm_modal ul li a.yes	{
	background:#dd0000;
	color:#fff;
}

#confirm_modal ul li a.no	{
	background:#333;
	color:#fff;
}

#modal {

display:none

}

#confirm_modal {

width:450px;

background:#efefef;

padding:30px;

border:1px #ddd solid;

-webkit-border-radius:10px;

-mozborder-radius:10px;

border-radius:10px;

}

#confirm_modal ul {

text-align:center;

margin:10px auto;

}

#confirm_modal ul li {

display:inline-block;

/display:inline;

/zoom:1;

padding:0 10px;

}

#confirm_modal ul li a {

display:block;

-webkit-border-radius:4px;

-mozborder-radius:4px;

border-radius:4px;

padding:5px 10px;

text-align:center;

cursor:pointer;

text-decoration:none

}

#confirm_modal ul li a.yes {

background:#dd0000;

color:#fff;

}

#confirm_modal ul li a.no {

background:#333;

color:#fff;

}

年齢認証アラートのサンプル

以下にサンプルを用意しました。

初回アクセス時にアラートボックスを表示しますが、「Yes」ボタンをクリックするとページをリロード（次回アクセス時）してもアラートは表示されません。

年齢認証アラートボックスのサンプル

参考ページ
Cookieを使って、モーダルウィンドウの年齢認証を作成する方法<