当 jquery 对话框打开时窗口向上滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2777408/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Window scrolling up when jquery dialog opens up
提问by zoom_pat277
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
我注意到的一件奇怪的事情是，在我打开模态后，页面变得很大......好像底部有一些额外的东西......它最终滚动到底部。知道为什么会发生这种情况
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');
采纳答案by Mottie
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('option','position')默认值为center.
position Type: String, Array Default: '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).
位置类型：字符串，数组默认值：'center'
指定应显示对话框的位置。可能的值：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:
因此，您可以使用位置选项返回文本或数字，并且window.scrollTo()需要数字。所以试试这个：
var d = $(".ui-dialog").position();
window.scrollTo( d.left , d.top);
回答by bassim
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 onclickattribute:
您需要return 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.
这可以防止页面重新加载到锚点#，从而导致它跳到顶部。
回答by telecasterrok
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; }
回答by Stephen Blair
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.
并且窗口不应滚动到页面底部，并且不会将额外的垂直空间添加到正文中。
回答by Mauricio Ramalho
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);
}
回答by Sirish
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.
这成功了并解决了问题。感谢您在此页面上的休息，他提供了很好的指导并帮助解决了问题。点赞团队。
回答by Agustincl
Another solution is to call event.preventDefault when the dialog is open
另一种解决方案是在对话框打开时调用 event.preventDefault
$('#demo4').click(function() {
$( "#tallContent" ).dialog( "open" );
event.preventDefault();
});
回答by Mag
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
希望能帮助到你。玛格
