20

我正在尝试使用 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]);

我注意到的一件奇怪的事情是，在我打开模式后，页面变得很大......好像底部有一些额外的东西......它最终会滚动到底部。知道为什么会发生这种情况

在 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');
4

8 回答 8

38

如果您使用如下锚标记来触发对话框

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

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

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

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

于 2010-08-06T14:00:42.453 回答
6

我也在为这个问题而苦苦挣扎。我没有使用任何主题，所以我没有这个重要的 CSS 属性：

position:absolute;

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

.ui-widget { position: absolute; }
于 2010-08-03T19:05:50.610 回答
3

看起来您#在选择器中缺少 ：

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

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

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

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

指定应显示对话框的位置。可能的值：1) 表示视口内位置的单个字符串：'center'、'left'、'right'、'top'、'bottom'。2) 一个数组，其中包含一个 x,y 坐标对，像素偏移量为视口左上角的像素偏移量（例如 [350,100]） 3) 一个包含 x,y 位置字符串值的数组（例如 ['right','top']右上角）。

因此，您可以使用 position 选项返回文本或数字，并且window.scrollTo()需要数字。所以试试这个：

var d = $(".ui-dialog").position();
window.scrollTo( d.left , d.top);
于 2010-05-06T00:57:23.977 回答
3

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

position: relative;

这覆盖了：

position: absolute;

对话框需要。

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

position: absolute;

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

于 2012-02-24T15:22:50.367 回答
1

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

为了调试问题，因此我不必包含整个 jQuery UI css，我制作了两个相同的页面，一个使用 jQuery UI css，一个不使用，只是通过 Firefox 上的 Firebug 检查了 css 中的不同之处并添加了这些样式到我的CSS。

希望能帮助到你。麦格

于 2010-05-26T14:11:54.090 回答
1

我如何修复它：

HTML

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

Javascript

function openDialogFunction(parameters) {

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

    //code to open the dialog

    $(window).scrollTop(topOff);
}
于 2013-03-08T16:05:30.767 回答
1

我有类似的问题，这就是我解决的方法。它类似于@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

});

这成功了并解决了问题。感谢您在此页面上的休息，他们提供了良好的指导并帮助解决了问题。赞团队。

于 2013-03-20T21:21:22.930 回答
1

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

$('#demo4').click(function() { 
    $( "#tallContent" ).dialog( "open" );
    event.preventDefault(); 
});
于 2013-06-15T07:03:56.533 回答