kawama.jp

jqueryで年齢認証っぽいダイアログを表示する

カテゴリ: Ajax,JavaScript — タグ: , , , — 2011年1月5日 22:40 — Comments (0)hatebu count

amazonなどで見かける「あなたは18歳以上ですか?」の警告、いわゆる年齢認証”っぽいもの”をjqueryで作ってみました。

参考:amazonの警告画面

amazonはサーバー側で認証してますが、javascriptだとクライアント側での認証です。
なので本質的に違うものになりますが、jqueryなら簡単に作れそうだと思ったので、とりあえず同じようなものを作ってみました。

流れとしては

0.クッキーを確認。認証が済んでいなければ1へ
1.ページにアクセスしたら画面全体を黒くし、認証ダイアログを表示
2.「いいえ」をクリックしたらYahooに飛ばす。「はい」をクリックしたらそのままページを表示
3.「はい」をクリックした場合、認証OKのクッキーを食わせて、再訪してもダイアログは出さないようにする

という具合になります。

クッキー制御にはjquery.cookie.jsを使いました。
http://plugins.jquery.com/project/cookie

認証ダイアログはSimpleModalというプラグインを選択。似たようなライブラリはいくつかありましたが、調べた中では最終更新が一番新しかったのでこれを選びました。
http://www.ericmmartin.com/projects/simplemodal/

サンプル:jqueryで年齢認証っぽいダイアログを表示

所詮はクライアントサイドなので限界はあると思いますが、先にcssでbodyをdisplay:noneにしておくとか、いろいろ工夫することでサーバーサイドの認証に近づけられると思います。

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress