JQuery-ui 对话框跳转到 Chrome 中的页面底部答案

【问题标题】：JQuery-ui dialog jumps to the bottom of page in ChromeJQuery-ui 对话框跳转到 Chrome 中的页面底部
【发布时间】：2013-06-20 11:38:30
【问题描述】：

我正在使用 jquery ui (jquery-ui-1.10.3)，但在 Chrome 中遇到了一些对话框问题。

我正在通过以下方式打开对话框：

$('#dialog').dialog({
    width: 400,
    buttons: {
        "save": function() { update(); $( this ).dialog( "close" ); }
    }
});

此对话框是可拖动的。对话框完美显示，但只要我需要拖动它，对话框就会/跳到页面底部，即使在滚动下方。这仅在 Chrome 中发生。

也许有人面临同样的问题。有什么想法吗？

谢谢

【问题讨论】：

您找到解决此问题的方法了吗？我刚刚从 Dialog 1.8.16 升级到 Dialog 1.10.3，在 Firefox 中遇到了同样的问题，但在 Chrome 中没有。
不，还没有找到解决方案（您使用的是哪个版本的 Firefox 和 Chrome？我使用的是 chrome 版本 27.0.1453.116 m 和 Firefox 和 Firefox 22.0
道歉 - 已经离开一段时间了。我在 FF22 和 Chrome 23.0.1271.95 (Linux Ubuntu) 上。

【解决方案1】：

这是 jQuery UI 1.10.3 - http://bugs.jqueryui.com/ticket/9315 中的一个错误。也可以被标记为jQuery ui dialog dragging issues的骗子。

【讨论】：

【解决方案2】：

这似乎解决了它

html, body {position: relative}

【讨论】：

【解决方案3】：

我已将父元素（在我的情况下为 body 标签）的位置设置为静态（它是相对的）并且它解决了问题。

if (isChrome){ document.getElementsByTagName("body")[0].style.position = 'static'; }

当然之前需要计算“isChrome”变量。

您还必须检查此更改是否不会破坏您现有的布局。

希望对你有帮助
安德拉斯

【讨论】：

【解决方案4】：

试过

html, body {position: relative}

但这对我不起作用。但是，发现这对我的情况有效。

body { height: 100%; }

修复了很多奇怪的问题。

【讨论】：

【解决方案5】：

对我来说 jquery-ui 1.10.1 运行良好。 1.10.3 中的上述错误似乎也在 1.10.4 中。

【讨论】：

【解决方案6】：

它在 jQuery UI 1.10.3 中不起作用，即使错误说它已修复。我发现它固定在：jQuery UI 1.11.2，没有尝试过以下任何版本。但是 1.11.2 一切都很好

【讨论】：

【解决方案7】：

试试

$( "#dialog-confirm" ).dialog({position: 'center',...

使用 jquery-ui-1.9.2.custom 解决了我的问题

【讨论】：

【解决方案8】：

添加样式表：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

帮我修好了

【讨论】：

【解决方案9】：

为必要的元素添加相对定位：

html, body, header, nav, main, footer, article, section, summary{ position: relative; },

我为我的 body 元素添加了相对定位，这解决了我的问题。我正在使用 jquery-ui-1.10.4

【讨论】：