jquery UI の Dialogは基本的にDialogの箱を position: absolute にしている。
スクロールするとダイアログはそのまま置いていかれ、画面の外にいってしまう。
それが困るので、画面に固定させる方法を色々試してみました。
最も簡単な方法が position: fixedにする方法です。
[javascript]
box = dialog.parent() //dialogはdialog()メソッドを呼んだ後のjqueryオブジェクト
box.css({position: ‘fixed’})
[/javascript]
しかし、これだとリサイズした際にjquery UIがpositionをabsoluteに戻してしまうらしく、バグが起きました。
というわけでリサイズした後に再度position: fixedに戻してやることで対応しました。
[javascript]
function fix(){
box = dialog.parent()
if(box.css(‘position’) == ‘absolute’){
top = parseInt(box.css(‘top’)) – $(window).scrollTop()
left = parseInt(box.css(‘left’)) – $(window).scrollLeft()
box.css({position: ‘fixed’, top: top + ‘px’, left: left + ‘px’})
}
}
fix()
dialog.on(‘dialogresizestop’) = function(e){
fix()
}
[/javascript]
ポイントはposition: absoluteと position: fixedではleftおよびtopが
相対値と絶対値という違いがあるのでwindowのスクロールポジションから補正してあげることです。
この記事は jquery UI -v 1.8.23にて検証したものです。
それ以外のバージョンでは状況が違う可能性があります。