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

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

参考：amazonの警告画面

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

流れとしては

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

という具合になります。


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

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


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


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