年齢認証の画面が必要なサイトもあるので

jQuery を使用しての年齢認証の画面を作成する事にしました

また、以下の情報を使用して作成しました

【jQuery】モーダルウィンドウによる年齢認証の作り方

こちらのサイトでも詳しく説明されてましたが

筆者の理解不足と経験が無い事で手間取りました

また、以下の方法を使用して作成出来ました

事前準備

  1. jquery.min.js
  2. jquery.cookie.js
  3. modalConfirm.js
  4. style.css

1 ～ 3 の javascript をダウンロードします。

4 の スタイルシートもダウンロードします。

作成方法

<!DOCTYPE HTML>
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=no">
<title>年齢認証</title>
<meta name="viewport" content="width=600, user-scalable=no">

<link rel="stylesheet" href="https://www.entblog.net/css/style.css">

<script type="text/javascript" src="https://www.entblog.net/js/jquery.min.js"></script>
<script type="text/javascript" src="https://www.entblog.net/js/jquery.cookie.js"></script>
<script type="text/javascript" src="https://www.entblog.net/js/modalConfirm.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<a class="remove_cookie">クッキー削除</a>

<div class="modal">
<p>このサイトは成人向けの情報を含みますので、<br>
18歳未満の方の閲覧を固くお断りいたします。</p>
<a class="close_modal" href="https://www.entblog.net/">ENTER</a>
<a href="http://www.google.co.jp/">LEAVE</a><br>
</div>

</body>
</html>

注意事項

①．jquery.min.js 、jquery.cookie.js、modalConfirm.js は js を作成して保存しています。

また、https://www.entblog.net/js/jquery.min.js として保存しています。

②．style.css は、css を作成して保存します。

また、https://www.entblog.net/css/style.css として保存しています。

 

問題点

年齢認証後、クッキー削除の画面が表示しますが

年齢認証が完了後、クッキー削除の画面を表示せずに

使用するサイトの画面を表示させたいけど・・・

Cookie の存在有無で表示画面を変更する方法が不明でした

まだまだ、勉強不足なので調べるようにします

jQuery レッスンブック jQuery2.X/1.X対応