こういうものは、どうも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というのもあるらしいです。こちらの方がサイズが小さいけど高機能らしいです。
0 件のコメント:
コメントを投稿