ちょいハマったのですが、データの登録・修正・削除で、ポップアップ・ダイアログを「出して、引っ込めて」って見栄えが良いですよね。元の画面もソックリ残るのでユーザーフレンドリです。script.aculo.usを使って、ツマんで移動出来たりして、カッコ良いです。
そこでカユイ点が出た。
検索結果でリストをドーッと出す、縦スクロールして、行にある修正や削除のボタンをクリック・・・で、ダイアログは・・・上え〜の方にあるのです。そりゃそうだ、CSSでposition:absolute;で設定されているtopやleftで出現しまさあね。
できれば、見ている画面の真ん中に出したい・・・。
- （浮かんだアイデア：１）押されたボタンの位置（高さ）を割り出して、その横にダイアログを出したら？ドウヨ。
親要素が違ったり・・・で、上手く行かない。（回想すると、styleの取得に失敗していたのカモ？）
- （浮かんだアイデア：２）押された時のマウスの座標から、その横にダイアログを出したら？ドウヨ。
パラメータにeventを追加しevent.pageYで位置を捕捉、prototype.jsのElement.setStyleでブツケてあげたら、出来たぜィ！！！。選択された行の真下に「まるでモノサシを当てたように出現する」いい感じじゃないですか！しばし感激。
しかし、画面上でのクリックは良いが、画面下でクリックすると、ダイアログは画面下から場外乱闘になる。何かイヤだなぁ。
- （浮かんだアイデア）上ので取りあえず「それなり」にはなったので、余裕を持って「再調査」
すると、すたら日記さんを発見。なるほど、ページの上から画面の上までの距離という発想で考えれば良かったのですね。これならeventも要らないや！
これが（スクロールしていても）画面のド真ん中（あたり）に、ドカンとダイアログを出現させる関数じゃ！っま、画面の縦・横を２で割るのは中心点になる訳だ。で、さらに出現するダイアログの大きさ分を補正してあげている訳だね。スバラシイ。
宮崎さん本当に有難うさんデス。
function setDialogFormPosition() {
// これは文書上端から表示上端までのなどの判断
sclTop=document.body.scrollTop || document.documentElement.scrollTop;
Element.setStyle(“dialogForm”,{
‘top’: sclTop + (document.documentElement.clientHeight / 2 – 150) + ‘px’,
‘left’ : (document.documentElement.clientWidth / 2 – 300) +’px’
});
}
