javascript - 组合 jQuery 对话框和选项卡时的高度问题

Question

当您使用 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>

Answer 1

您遇到的问题是，由于tabs是在dialog之后初始化的，因此一些选项卡CSS规则会覆盖以下CSS规则:对话框并将其向上移动到显示屏上。

解决此问题的最简单方法是将对话框和选项卡初始化移至同一个文档就绪调用中，并仅在对话框之前初始化选项卡:

$(function () {
    $("#tabs").tabs();
    $("#dialog").dialog({
        width: 409,
    });
});

解决这个问题的更复杂的方法是确定哪些 CSS 规则存在冲突并纠正它们。或者，如果无法更改顺序，您可以在选项卡初始化后将对话框简单地移动到屏幕中央。