2008-09-05

モーダルダイアログなフォームを作る

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
正式にはなんていうのかわからないのですが、更新作業などをする時にページ遷移をせずに現在のページが暗くなって、その上にモーダルダイアログな感じのフォームが出てくる感じのことをやりたいわけです。
こういうものは、どうもLightbox風と呼ばれているような気配もします。

実際にやるには、jQueryと組み合わせるならば
ThickboxというjQueryのプラグインを使うといいようです。

実際にフォームを表示させるには、
<a class="thickbox" title="Update" href="http://www.blogger.com/update?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=600&modal=true"> Update </a>
みたいな感じで普通にリンクに書いてclassにthickboxと書けばよいようです。

こうすると開きたいたいフォーム(この場合はupdate)をiframeで開いてくれます。
?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=600&modal=true
の部分を実際に表示させたいurlにつけるのがポイントです。

そして開いたiframe内でiframeを閉じたいときには
<input onclick="self.parent.tb_remove();" type="button" value="閉じる">
って感じに普通にフォーム内に書いておけば閉じてくれます。
&modal=true
をつけておかないとこの機能は使えないようです。
&modal=true
がなければ、Thinkboxの方で閉じるボタンをつけてくれます。

更新作業などが終わって、iframeでのフォームを閉じる時に元の画面の情報を更新したい時には、以下のような感じのボタンを用意することで対応できました。
<input onclick="self.parent.location.reload();" type="button" value="閉じる">

同じようなものをやるものとして、
jqModalというのもあるらしいです。こちらの方がサイズが小さいけど高機能らしいです。
コメントを投稿