当您使用jQuery dialog()时，您会在屏幕上获得完美居中的弹出窗口。当我在对话框中引入tabs()时，框顶部和浏览器窗口顶部之间的垂直距离小于弹出窗口底部到浏览器底部的垂直距离。
我不想将高度变量添加到dialog()，因为我希望它根据内容自动缩放。
$(function() {
$("#dialog").dialog({
width: 409,
});
});
$(function() {
$("#tabs").tabs();
});<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="dialog" title="Popup">
<div id="tabs">
<ul>
<li><a href="#fragment-1">Tab 1</a>
</li>
<li><a href="#fragment-2">Tab 2</a>
</li>
</ul>
<div id="fragment-1">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div id="fragment-2">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
ipsum lorem ipsum lorem ipsum
</div>
</div>
</div>
答案 0 :(得分：1)
您遇到的问题是，由于tabs正在 dialog后进行初始化，因此某些选项卡css规则会覆盖对话框的css规则并将其向上移动显示。
解决此问题的最简单方法是将对话框和制表符初始化移动到同一个文档就绪调用中，然后在对话框之前初始化选项卡：
$(function () {
$("#tabs").tabs();
$("#dialog").dialog({
width: 409,
});
});
更复杂的解决方法是确定哪些css规则存在冲突并纠正它们。或者，如果您无法更改订单，则可以在选项卡初始化后将对话框移动到屏幕中心。