jqueryでドラッグ可能なダイアログを作る(ipop_multi.js)

を用意することになりました。

最初jquery uiのDraggableを使おうかと思ったのですが、単純に小窓を開いてグリグリ動かせれば良かったので、こちらのプラグインを使わせていただくことにしました。

ipop.js

が、途中で仕様変更があり、同時に複数ダイアログを開くことが必要になりました。

仕方ないのでipop.jsに少し手を加えさせていただき、複数ダイアログに対応させてみました。ipop_multi.jsと名付けました。

せっかくなのでサンプルとソースを置いておきます。良かったらお使いください。

サンプル：ipop_multi.js

ipop_multi.jsソース

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にしておくとか、いろいろ工夫することでサーバーサイドの認証に近づけられると思います。