结合jQuery对话框和选项卡时的高度问题

Height issue when combining jQuery dialog and tabs

本文关键字：高度 问题 选项 jQuery 对话框 结合      更新时间：2023-09-26

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

您遇到的问题是，由于tabs在 dialog之后被初始化，一些选项卡的css规则重写了对话框的css规则并将其向上移动。

解决这个问题的最简单的方法是将你的对话框和制表符初始化到同一个文档就绪调用中，并且只在你的对话框之前初始化制表符: 
$(function () {
    $("#tabs").tabs();
    $("#dialog").dialog({
        width: 409,
    });
});

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

相关文章：