Webアプリでモーダルダイアログ

2006/06/05 21:22 | 1 Comments

昨日、lightbox使えばモーダルダイアログが簡単に使える、というエントリを書いたのだけど、lightboxのソースを見ると、ただのモーダルダイアログを出すのは簡単みたい。サンプルはこれ。(prototype.jsを使っているけど、ラクして$を使ってるだけだから、必須というわけではないです。)
サンプルのソースを見てもらえば分かると思うけど、要するにやっていること3つ。
・黒い下敷きを作成
ダイアログ以外のコントロールを触れなくするためのレイヤー。positionをabsolute、高さと幅を100%にして、z-indexを5000くらいにしておく。見た目を考えて、透過処理もしておく。
・ダイアログを作成
z-indexを9999くらいにしておくことで、黒い下敷きより前面に配置する。
・イベントハンドラを設定
黒い下敷きとダイアログのdisplayをnoneとblockを切り替える。

あとはAjaxとの連携も必要になるけど、モーダルダイアログを作るだけならこれでOK。というわけで、昨日のエントリに書いたバッドノウハウは早くも不要になりましたな。
このエントリーをはてなブックマークに追加
この記事へのコメント
x(2010/10/13 13:53)
xx
名前 (必須)
コメント (必須)
確認文字 (必須) ひらがなで「ども」と入力してください。(スパム防止用)