[JS]SimpleModal と jQuery Cookie による認証ボックスの実装方法｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

jQueryプラグイン・ライブラリ Javascript・jQuery

jQuery Cookie SimpleModal

スポンサード

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

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

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

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

SimpleModal のダウンロード

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

SimpleModal

jQuery Cookie のダウンロード

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

jQuery Cookie

SimpleModal と jQuery Cookie の設置

jquery ファイルと一緒に jquery.cookie.js と jquery.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>

$(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="https://www.webantena.net/javascriptjquery/simplemodal-authbox/">No</a></li>
</ul>
</div>

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

<p>このサイトは成人向けの情報を含みますので、<br />

18歳未満の方の閲覧を固くお断りいたします。<br />

<br />

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

<ul>

</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;
}