WEBデザインテクニック|KLUTCHE

【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を削除するリンクを付けてます。

デモサイト

完成はこんな感じです。

デモ

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

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

“【jQuery】Cookieを使って、モーダルウィンドウの年齢認証を作成する方法” への8件のフィードバック

  1. eropedia より:

    WordPressでの年齢認証の設置を考え、検索でたどり着きました。

    プラグインでは中々良いものがなく、テーマを編集しようと考えておりましたところ、こちらのサイトは非常にわかりやすく、デモページが非常に秀逸で是非とも設置を試みたいと思いました。

    あと、ご相談なのですが、デモページに使われている画像3点を頂戴させて頂く訳には参りませんでしょうか?

    • KLUTCHE より:

      コメントありがとうございます。
      該当デモページ内の画像は、ご自由に利用・加工して頂いて結構です。
      ただし画像への直リンクは御遠慮願います。

  2. eropedia より:

    早々の画像使用のご許可、誠にありがとうございます。

    ありがたく使用させて頂きます。

    重ねてのご相談なのですが、これらをWordPressで使いたく奮闘しているのですが、中々上手くいかずに困っております。

    こちらの記事をWPで使用する際の記述などを公開して頂くことはできませんでしょうか?

    テーマのheader.phpに記述して文章や画像直下の記述で表示はできるのですが、上手くjQueryが動いていないようなんです。

    もし、お手すきであればお暇な時にでもご教授して頂ければ幸いです。

  3. […] というかこの「【jQuery】Cookieを使って、モーダルウィンドウの年齢認証を作成する方法」 […]

  4. kaoru より:

    初めまして。HP作成初心者です。

    同じように年齢認証をやりたいのですが、やってみたんですができなく質問

    させてください。

    1:白紙のページからやるのでしょうか?それともindex.htmlをコピーして違うファイル名に変え、元のindex。htmlに上記のタグを入力するのでしょうか?

    2:Javascriptの読み込みタグ と Javascriptで設定を書くのタグを

    入力するとデモができるんでしょうか?

    初歩的な質問ですいません。

    上記の
    Javascriptの読み込みのタグはどのあたりに入れればいいのでしょうか?

  5. […] 【jQuery】Cookieを使って、モーダルウィンドウの年齢認証を作成する方法 | クラッチェ! […]

  6. ケイタ より:

    スプラッシュページ作成の参考にさせて頂いています。
    Cookieの保存期間を30日間にしたいたのですが、下記記述で良さそうでしょうか?

    clifetime.setTime(clifetime.getTime()+(2*60*60*1000));
     ↓
    clifetime.setTime(clifetime.getDate()+(30));

  7. ケイタ より:

    自己解決しました。

    $(‘.yes’,dialog.data[0]).click(function(){
    var clifetime = new Date();
    clifetime.setTime(clifetime.getTime()+(2*60*60*1000));//2時間
    $.cookie(‘over18′,’yes’,{expires:clifetime});

     ↓

    $(‘.yes’,dialog.data[0]).click(function(){
    $.cookie(‘over18′,’yes’,{expires:30});
    });

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です