jQuery を 使用して年齢認証の画面を作成

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

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="http://blogweb.dreaminfo.info/css/style.css">

<script type="text/javascript" src="http://blogweb.dreaminfo.info/js/jquery.min.js"></script>
<script type="text/javascript" src="http://blogweb.dreaminfo.info/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://blogweb.dreaminfo.info/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="http://blogweb.dreaminfo.info/">ENTER</a>
<a href="http://www.google.co.jp/">LEAVE</a><br>
</div>

</body>
</html>

注意事項

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

また、http://blogweb.dreaminfo.info/js/jquery.min.js として保存しています。

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

また、http://blogweb.dreaminfo.info/css/style.css として保存しています。

 

問題点

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

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

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

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

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

コメントを残す

サブコンテンツ

カレンダー

2017年12月
« 11月    
 123
45678910
11121314151617
18192021222324
25262728293031

賢威

電脳卸

天気予報


-天気予報コム-

お奨め情報

COUNTER

合計:67251
本日:9
昨日:10
訪問者:0

このページの先頭へ