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にて検証したものです。
それ以外のバージョンでは状況が違う可能性があります。