Question

我正在尝试使用jquery 1.4和jquery-ui-1.8rc3.custom.js打开模态jquery对话框

在所有浏览器中，对话框打开都没有问题，但在IE 7和6中，对话框打开后，窗口自动滚动到按钮...我尝试将窗口向上滚动回到模态位置但是是非常不一致的。打开模态后使用以下代码行

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]);

我注意到的一个奇怪的事情是，在我打开模态之后，页面变得巨大......好像一些额外的东西加在底部......它最终滚动到底部。不知道为什么这可能是hapenning

in html

<div id="selector">
</div>

在document.ready

中

$('#selector').dialog({
  bgiframe: true,
  autoOpen: false,
  width: 100,
  height: 100,
  modal: true,
  position: 'top'
});

在js

$('#selector').dialog('open');

Answer 1

如果您使用如下所示的锚标记来触发对话

<a href="#" onclick="$(#id).dialog('open');">open dialog</a>

您需要在return false;属性中添加onclick：

<a href="#" onclick="$(#id).dialog('open'); return false;">open dialog</a>

这可以防止页面重新加载到#，导致它跳转到顶部。

Answer 2

我也在努力解决这个问题。我没有使用任何主题，所以我没有这个重要的CSS属性：

position:absolute;

我将此添加到我的CSS文件中，现在一切正常：

.ui-widget { position: absolute; }

Answer 3

您的选择器中似乎缺少#：

window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]);

这可能是窗口滚动到左上角的原因。

编辑：我只看文档，.dialog('option','position')默认值为center。

position类型：字符串，数组默认值：'center'

指定对话框的位置   显示。可能的值：1）a   单个字符串代表位置   在视口内：'center'，'left'，   '正确'，'顶部'，'底部'。 2）一个数组   包含x，y坐标对   像素偏离左边，上角   视口（例如[350,100]）3）一个数组   包含x，y位置字符串值   （例如右上角的['right'，'top']   角）。

因此，您可以使用位置选项获取文本或数字，window.scrollTo()需要数字。所以试试这个：

var d = $(".ui-dialog").position();
window.scrollTo( d.left , d.top);

Answer 4

我遇到了这个问题，因为我正在为我的样式表设置的对话框分配一个类：

position: relative;

覆盖了：

position: absolute;

对话框需要

。

基本上，确保.ui-dialog类具有：

position: absolute;

并且窗口不应滚动到页面底部，并且额外的垂直空间不会添加到正文中。

Answer 5

我遇到类似情况，对话框在页面上应该打开，但用户被重定向到页面底部。基本上，我忘了包含适当的css来匹配jQuery UI JavaScript库。通过这样做一切都很好。我想它就是这样的，jQuery css上的元素上设置的样式没有在你自己的CSS中设置。

要调试问题所以我没有必须包含整个jQuery UI css，我制作了两个相同的页面，一个使用jQuery UI css而另一个没有，只是通过Firefox上的Firebug检查了css中的不同之处将这些样式添加到我的CSS中。

希望它有所帮助。 MAG

Answer 6

我如何解决它：

<强> HTML

<a href="javascript:openDialogFunction(parameters)">...</a>

<强>的Javascript

function openDialogFunction(parameters) {

    var topOff = $(window).scrollTop();

    //code to open the dialog

    $(window).scrollTop(topOff);
}

Answer 7

我有类似的问题，这就是我解决的问题。它类似于@bassim解决方案，但它的味道略有不同。

我有相同的锚标记并使用“$（＃anchor-element）.click（function（）{..}。以下是代码片段 -

在jsp -

中

<a id="open-add-comments-${site}" class="open-add-comments" href="#"  site-id="${site}" project-id="${project}"  >Add comments</a><br/>

在javascript中 -

 $( ".open-add-comments" ).click(function(){

    var projectId=$(this).attr("project-id");

    $( "#add-comment-form" ).dialog({
        //width: "auto",
        width: 800,
        height: "auto",
        position: "absolute",
        maxWidth: 800,
        minWidth: 300,
        maxHeight: 400,
        modal: true,
        title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ",
        open: function(event, ui) { 

        $("#add-comment fieldset textarea").html("").focus();
            ............
            .....
        },
        buttons: {
            "Save": function() {

            .... some business logic

            },
            Cancel: function() {
                $( this ).dialog( "close" );

            }
        }   

    });

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE

});

这样就解决了这个问题。感谢您在此页面中休息，他们提供了很好的指导并帮助解决了这个问题。荣誉团队。

Answer 8

另一种解决方案是在对话框打开时调用event.preventDefault

$('#demo4').click(function() { 
    $( "#tallContent" ).dialog( "open" );
    event.preventDefault(); 
});

当jquery对话框打开时，窗口向上滚动

8 个答案: