Vla*_*sov 3 scroll jquery-ui jquery-ui-dialog jquery-draggable
简而言之:当您有文档高度>窗口高度时,向下滚动并打开对话框 - 您无法在Firefox中拖动它.Bug仅在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对话框,标签<body>有垂直滚动(例如,你有很多内容,例如大表).假设您的窗口高度为800像素,文档高度为2000像素; 所以你需要向下滚动,以获取所有内容.
然后向下滚动窗口高度,例如1000px,打开对话框.之后你无法正确地将它拖到任何其他位置,因为它像疯了似的跳跃.
我记录了一个基于原始jquery ui示例的演示,因此没有人可以说我错过或损坏了某些东西.我改变的只有一件事是body css attr"height",并将其设置为2000px来模拟大文档.
我感谢任何建议/解决方案.
突然间,我找到了解决方案.
要修复此错误,您只需添加以下CSS规则
.ui-dialog {
position: fixed;
}
但这也有副作用.如果对话框的一部分超出窗口范围,则不会出现垂直/水平滚动条,并且您无法以任何方式到达对话框的隐藏部分.需要等待Jquery UI团队的正确修复.
这是jquery-ui版本1.10.3中的错误
您可以通过包含以前的版本来解决此问题:
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>