$(window).scroll(function(){
if($('#ux-dialog-test-container').dialog('isOpen') === true){
var dialogHeight = $('.ui-dialog').height();
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var scrollLength = documentHeight - windowHeight;
var currentScrollTop = $(window).scrollTop();
var scrollPercentage = currentScrollTop/scrollLength;
var pixelsToSubtract = dialogHeight * scrollPercentage;
var newTop = 32 - pixelsToSubtract;
$('.ui-dialog').animate({top: newTop + 'px'}, 15, 'swing');
}
});
私はこれについて古い質問があることを知っていますが、私は同じ問題に苦労しており、これが適切な解決策であることを発見しました。基本的に、モーダルダイアログをスクロールするという錯覚を与えます。実際にはスクロールダウンするときに上を上にしています。スクロールしたウインドウの割合を計算し、そのパーセントを "top:" CSSプロパティを調整するために使用しました。私の場合、トップは32pxに設定されていました。私の計算で調整したのが分かります。これが誰かを助けることを願っています!
ああ!スクロールのロックを解除するために、別のスレッドから盗んだものが必要です(つまり、クロムでは、スクロールバーのクリックイベントはmodal:trueの場合は抑制されます)
if ($.ui && $.ui.dialog) {
$.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}
私はこれがIE8 +だけでなく、ChromeとFFで動作することを知っています。
編集:ダイアログが開いているかどうかを確認するためのチェックが追加されました。