【jQuery】Cookieを使って、モーダルウィンドウの年齢認証を作成する方法

アダルトコンテンツを作る場合に便利なモーダルウィンドウの作り方です。

※改良版を作りました。
モーダルウィンドウによる年齢認証の作り方

モーダルウィンドウとは？

コンテンツ前面に出てきて、ボタン操作をするまで、ページのコンテンツに触れなくするウィンドウのことです。

年齢認証とは？

アダルトページに入る時にある「18歳以上ですか？」というアレです。

Cookieを使う？

一度年齢認証を行った後、同じページに訪れた場合に再び年齢認証を表示させないように、ユーザーが訪れた記録をCookieに保存する必要があります。

使用するJavascript

jQueryと、そのプラグインであるjquery.cookie.js・jquery.simplemodal.jsを使用します。

jQuery
jquery.cookie.js
SimpleModal

Javascriptの読み込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.simplemodal.1.4.2.min.js"></script>
<script type="text/javascript">

まずはHTML内に、使用する3つのJavascriptを読み込みます。

Javascriptで設定を書く

$(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();
			});
		}
	});
}

Cookieが保存されていなければ、モーダルウィンドウを表示して、認証ボタンが押されると、Cookieを保存して、コンテンツを表示する旨を、書き書きします。

ここでCookieの保存期間を指定できます。上記の場合は2時間設定です。
認証した後2時間後にサイトを訪れると再び年齢認証が表示されます。

HTML

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

<div id="modal">

<p>このサイトは成人向けの情報を含みますので、<br />
18歳未満の方の閲覧を固くお断りいたします。</p>

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

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a class="yes"><img src="enter.png" width="160" height="70" alt="ENTER" /><img src="confirm.png" width="70" height="70" alt="" /></a></td>
    <td></td>
    <td><a href="http://www.google.co.jp/"><img src="leave.png" width="160" height="70" alt="EXIT" /></a></td>
  </tr>
</table>

</div>
<!-- /modal -->

実験のため、Cookieを削除するリンクを付けてます。

デモサイト

完成はこんな感じです。

デモ

重要なお知らせや、登録用フォームを表示する場合にも使えると思います。

※改良版を作りました。
モーダルウィンドウによる年齢認証の作り方