jQueryUI模式对话框 - 拖动会导致Google Chrome中的位置发生意外更改

时间:2013-04-23 09:32:38

标签: css jquery-ui google-chrome webforms jquery-dialog

Chrome v.26.0.1410.64

jQuery v.1.7.1

jQueryUI v。最新

使用asp.net webforms构建Web应用程序

  • 当页面位于顶部时,会发生正常打开的对话框,一切都按预期工作。拖动对话框不会导致任何问题。如果页面向下滚动,则在尝试拖动对话框时,对话框的顶部 css属性将大致增加垂直滚动量的值。这种情况仅发生在谷歌浏览器中。

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

    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,这太棒了

1 个答案:

答案 0 :(得分:0)

在chrome中遇到了同样的问题,并用

解决了这个问题
           open:function(){
            $('body').addClass('stop-scrolling')
        },

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

这对我有用,因为我的对话框非常小,但如果对话中的内容多于屏幕上的空间,则可能会遇到麻烦

css类看起来像

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

并阻止身体滚动