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

I am trying to open a modal jquery dialog using jquery 1.4 and jquery-ui-1.8rc3.custom.js

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

The dialog opens up with no issues, in all browsers, but in IE 7 and 6, after the dialog opens up, the window scrolls itself to the buttom... I tried scrolling the window up back to the modal position but is very inconsistent. was using the following line of code after opening up the modal

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

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

One weird thing I am noticing is that after I open the modal, the page becomes huge... as if some extra things adds up on the bottom .... and it eventually scrolls to the bottom. Any idea why this could be hapenning

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

in html

在HTML中

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

in document.ready

在document.ready

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

in js

在js

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

8 个解决方案

#1

Looks like you are missing the # in your selector:

看起来你错过了选择器中的＃：

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

that might be why the window is scrolling to the left top corner.

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

Edit: I was just looking at the documentation and .dialog('option','position') default value is center.

编辑：我只是看文档和.dialog（'选项'，'位置'）默认值是中心。

position Type: String, Array Default: 'center'

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

Specifies where the dialog should be displayed. Possible values: 1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'. 2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100]) 3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).

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

So you could get text or numbers returned using the position option and window.scrollTo() requires numbers. So try this instead:

因此，您可以使用position选项和window.scrollTo（）获取返回的文本或数字。所以试试这个：

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

#2

If you're using an anchor tag like below to trigger the dialog

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

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

you'll want to add a return false; to the onclick attribute:

你会想要添加一个返回false;到onclick属性：

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

This prevents the page reloading to anchor # which causes it to jump to the top.

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

#3

I was struggling with this issue too. I didn't use any theming so I didn't have this important CSS property:

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

position:absolute;

I added this to my CSS file and all works fine now:

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

.ui-widget { position: absolute; }

#4

I had this problem because I was assigning a class to the dialog that in my stylesheet was setting:

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

position: relative;

which was overriding the:

这超越了：

position: absolute;

needed by the dialog.

对话框需要。

Basically, make certain the .ui-dialog class has:

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

position: absolute;

and the window shouldn't scroll to the bottom of the page and the extra vertical space won't be added to the body.

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

#5

I have had a similar situation where the dialog was opening where it should on the page, but the user was redirected to the bottom of the page. Basically, I forgot to include the appropriate css to match the jQuery UI JavaScript library. By doing this everything was ok. I imagine it's something like that, where there are styles set on elements on the jQuery css that are not set in your own css.

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

To debug the problem so I didn't have to include the whole jQuery UI css, I made two identical pages, one using the jQuery UI css and one not and just checked what was different in the css via Firebug on Firefox and added these styles to my css.

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

Hope it helps. Mag

希望能帮助到你。马格

#6

How I fixed it:

我是如何修理它的：

HTML

HTML

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

Javascript

使用Javascript

function openDialogFunction(parameters) {

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

    //code to open the dialog

    $(window).scrollTop(topOff);
}

#7

I had similar issue and this is how I resolved. Its similar to @bassim solution, but with a little different flavor of it.

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

I had the same anchor tag and used "$(#anchor-element).click(function(){..}. Below is the code snippet -

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

In jsp -

在jsp中 -

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

In javascript -

在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

});

This did the trick and resolved the issue. Thank you for rest in this page who gave good pointers and helped to resolve the issue. Kudos team.

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

#8

Another solution is to call event.preventDefault when the dialog is open

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

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

#1