あと少しprototype + script.aculo.us でがんばってみる。

modal ダイアログの作成。ちょっとしたプロパティの編集や、Now Loading ... の際に、ページの編集をさせたくない場合に使いたいモーダルダイアログ、を作る。

一応実装イメージ候補は、livepipe の Window コントロール。が、使用せず*1。

で、モーダルダイアログの作り方。

1. Overlay と Window コンテンツ表示の用のdivブロックを用意する。
- div が存在しなければ、作成するようにする。document.body でもどこでもいいので非表示の状態にしてappendChild。
- 通常のコンテンツ.zindex < Overlay.zindex < Window.zindex となるようにする
2. show() で以下を実行。
- Overlay のサイズをめいっぱいにして表示。
- prototype の 1.6.0 には document.viewport.getDimensions()/getScrollOffsets() という表示領域の幅・高さおよびそのオフセットを取得するメソッドがある。
- Window コンテンツの幅と高さを設定して、中央にabsolute表示する
- window.resize, window.scroll イベントを監視して、Overlay のサイズ、Window コンテンツのサイズ・位置が常に正しくなるように養成する。
3. hide() で以下を実行。
- window.resize, window.scroll のイベントモニターを停止。
- Windowコンテンツを非表示に。
- Overlay を非表示に。

あとは、show()の時に、Ajax でコンテンツをとってくるとか、Image をとってくるとか。そもそも テキストをそのまま表示するとか、×ボタンをつけるとか、そんな感じにする。"モーダルダイアログ"なので、リサイズとかはいらないと思う。

2,3時間ちゃんとprototypeのソースを理解すれば意外といけるんじゃん、ということに気がついた。。。たぶんJavaScriptが食わず嫌いだったんだなぁ。。

*1: prototype / script.aculo.us に関して、Rails が依存するprototypeとこれらのUIコンポーネントの依存するprototypeのバージョン問題をクリアにする必要があって、その観点で、UIコンポーネントだけを組み込むのはやりたくない、という理由