css - jQueryUI 模态对话框 - 拖动会导致 Google Chrome 中的位置发生意外变化

Question

Chrome 版本 26.0.1410.64

jQuery 1.7.1 版本

jQueryUI 与最新

网络应用程序是使用 asp.net webforms 构建的

• 发生的情况是，当页面位于顶部时，对话框会正常打开并且一切都按预期进行。拖动对话框没有问题。如果页面向下滚动，当尝试拖动对话框时，对话框的 top css 属性大致增加垂直滚动量的值。这仅在 Google Chrome 中发生。

这是打开模态弹出窗口的函数的一部分。

    var $dialog = $('<div id="dialogIframe" title="Some title"></div>')
    .html('<iframe id="jqueryIframe" style="border: 0px;" src="' + page + '"
    width="99%" height="99%"></iframe>')
    .dialog({
        autoOpen: false,
        modal: true,
        height: height,
        width: width,
        resizable: false,
        draggable: true,
        buttons: dialog_buttons,
        close: function (event, ui) {
            $('#dialogIframe').remove();
        }
     });

     $dialog.dialog('open');

• 我正在处理其他人的代码。我不确定是什么导致了这种行为。 什么可能导致这种行为？

编辑:- 当切换到 jQuery 版本:1.9.1 时，它按预期在 Google chrome 中工作，但现在在 IE9 和 FF 最新版本中出现了同样的问题(他们可以正常使用旧的 jQ 版本)

编辑 2:- 我觉得这个问题可能与 webforms 中的 MaintainScrollPositionOnPostback 页面属性有关，顺便说一句，我无法以任何常规方式禁用或设置为 false:在 aspx 页面上，同一页面的代码隐藏，母版页, web.config, 这太棒了

Answer 1

在 chrome 中有同样的问题并用

解决了它

           open:function(){
            $('body').addClass('stop-scrolling')
        },

    beforeClose: function( event, ui ) {
        $('body').removeClass('stop-scrolling')
    },

这对我有用，因为我的对话非常小，但是当对话中的内容多于屏幕上的空间时，您可能会遇到麻烦

css类看起来像

 .stop-scrolling {
 height: 100%;
 overflow: hidden;
}

并防止正文滚动