3

简而言之：当您的文档高度 > 窗口高度时，向下滚动并打开对话框 - 您不能在 Firefox 中拖动它。错误仅在 jQuery UI 1.10.x 中出现

如何重现：

jsfiddle：

http://jsfiddle.net/mefa/zrNNZ/15/

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Jquery UI FF dialog bug - jsFiddle demo by mefa</title>
    <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <link href="/css/result-light.css" type="text/css" rel="stylesheet">
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    html {
        font-size:12px;
    }
    body {
        height: 2000px;
    }
    </style>
    <script type="text/javascript">
    $(window).load(function(){
     $(function() {
        $( "#dialog-modal" ).dialog({
          height: 150,
          modal: true
        });
      });
    });
    </script>
</head>
<body>
<div title="Basic modal dialog" id="dialog-modal">
    <p>Drag this dialog to bottom of document in Firefox</p>
    <p>Bug only in jquery ui 1.10.x</p>
</div>
<p>Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>

视频：http ://www.youtube.com/watch?v=_J8aepYHg4U

所以，假设 U 有一个 Jquery UI Dialog，并且标签<body>有垂直滚动（例如你有很多内容，例如大表）。假设您的窗口高度为800像素，文档高度为2000像素；所以你需要向下滚动，以获取所有内容。

然后向下滚动，在窗口高度上，例如到1000px，打开对话框。之后你不能正确地将它拖到任何其他位置，因为它像疯了一样跳跃。

我已经录制了一个演示，基于原始的 jquery ui 示例，所以没有人可以说我错过或损坏了某些东西。我改变的只有一件事是 body css attr "height"，并将其设置为 2000px 以模拟大文档。

我感谢任何建议/修复。

4

4 回答 4

5

突然，我找到了解决办法。

要修复此错误，您只需添加以下 CSS 规则

.ui-dialog {
    position: fixed;
}

但这也有副作用。如果对话框的一部分超出窗口范围，则不会出现垂直/水平滚动条，并且您无法以任何方式到达对话框的隐藏部分。需要等待 Jquery UI 团队正确修复。

于 2013-07-29T12:16:45.220 回答
5

这是 jquery-ui 版本1.10.3
中的一个错误 您可以通过包含以前的版本来解决此问题：

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
于 2014-01-17T10:51:15.753 回答
3

真正的修复是用最新的master（1.10.3是官方当前版本，所以修复应该在1.11中出现）替换jquery.ui.draggable.js中的_convertPositionTo（）和_generatePosition（）它现在不能使用那些css hacks。

于 2013-10-16T01:47:00.000 回答
1

我为你尝试了一些东西

这不是最好的，但你可以试试。我希望

将您的代码重新放置为

 $(function() {
   $( "#dialog-modal" ).dialog({
     height: 150,
     modal: true,
     dragStop: function( event, ui ) {           
       $( "#dialog-modal" ).dialog({ position: 'center',draggable: true });
    }

  });
});

当您单击鼠标时，它会粘在屏幕的中心...例如，我将其保持在中心，但您可以将其保持在任何位置...只需阅读文档即可。

于 2013-06-12T14:17:15.463 回答