• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly


この記事は KLUTCHE 様の記事を参考にさせていただきました。

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

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

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

SimpleModal のダウンロード

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


jQuery Cookie のダウンロード

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


SimpleModal と jQuery Cookie の設置

jquery ファイルと一緒に jquery.cookie.jsjquery.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>
アラートボックスの設定や、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="http://www.webantena.net/javascriptjquery/simplemodal-authbox/">No</a></li>
</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;
}


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

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

初回アクセス時にアラートボックスを表示しますが、「Yes」ボタンをクリックするとページをリロード(次回アクセス時)してもアラートは表示されません。
年齢認証アラートボックスのサンプル




  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す