如何垂直居中具有不同高度选项卡的对话框？
Posted
技术标签:
【中文标题】如何垂直居中具有不同高度选项卡的对话框？【英文标题】：How to vertical center dialog box with different hight of tabs? 【发布时间】：2017-06-12 01:10:40 【问题描述】：我知道jquery ui 对话框默认居中。但是当我放入对话框选项卡时遇到问题。第一个是简短的登录表单，第二个是较长的注册表单。
当我打开对话框时，它是居中的，但是当我打开另一个选项卡时，对话框不是垂直居中的。
我的问题：是否可以通过切换选项卡重新定位对话框？
这是我的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
form>div
margin-bottom: 15px;
form>div>labelwidth: 30%; display: inline-block;
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="styles.css">
<script>
$(function()
dialog = $( "#dialog" ).dialog(
autoOpen: false,
modal: true,
draggable: false,
width: 480,
);
$( "#open-popUp" ).on( "click", function()
dialog.dialog( "open" );
);
);
$( function()
$( "#dialog" ).tabs();
);
</script>
</head>
<body>
<h1>Test</h1>
<button id="open-popUp">open</button>
<div id="dialog" title="Basic dialog">
<ul>
<li><a href="#tabs-login">Login</a></li>
<li><a href="#tab-reg">Registration</a></li>
</ul>
<div id="tabs-login">
<form>
<div>
<label for="inputEmail">Email:</label>
<input type="email" id="inputEmail" placeholder="Email...">
</div>
<div>
<label for="inputPassword" class="col-sm-3 control-label">Password:</label>
<input type="password" id="inputPassword" placeholder="Heslo...">
</div>
<button type="submit" class="btn btn-default" id="btn-login">Login</button>
</form>
</div>
<div id="tab-reg">
<form>
<div>
<label for="inputFirstName">First name:</label>
<input type="text" id="inputFirstName" placeholder="Name...">
</div>
<div>
<label for="inputLastName">Last name:</label>
<input type="text" id="inputLastName" placeholder="Name...">
</div>
<div>
<label for="inputE-mail">E-mail:</label>
<input type="text" id="inputEmail" placeholder="E-mail...">
</div>
<div>
<label for="inputPassword">Password:</label>
<input type="password" id="inputPassword" placeholder="Password...">
</div>
<div>
<label for="inputPassword2">Re-password:</label>
<input type="password" id="inputPassword2" placeholder="Re-password...">
</div>
<div>
<label for="inputBirthday">Birthday:</label>
<input type="text" id="inputBirthday" placeholder="Birthday...">
</div>
<div>
<label for="inputCity">City:</label>
<input type="text" id="inputCity" placeholder="City...">
</div>
<button type="submit" class="btn btn-default" id="btn-login">Registration</button>
</form>
</div>
</div>
</body>
</html>
【问题讨论】：
创建了一个测试小提琴：jsfiddle.net/Twisty/t3qnLt2h 请解释一下您在切换标签时希望发生什么？您希望标签 1 的高度与标签 2 的高度相同吗？或者您是否希望对话框重新定位，使其在每次切换选项卡时以window 为中心？
我希望对话框重新定位，以便每次切换选项卡时它都在窗口中居中。
【参考方案1】：
我在这里发现了一个有用的花絮：How to auto-center jQuery UI dialog when resizing browser?
要使用的sn-p是：
$("#dialog").dialog("option", "position", my: "center", at: "center", of: window);
您的示例中的工作示例：https://jsfiddle.net/Twisty/t3qnLt2h/4/
JavaScript
$(function()
function recenter(d)
if (typeof d !== "object")
d = $(d);
d.dialog("option", "position",
my: "center",
at: "center",
of: window
);
dialog = $("#dialog").dialog(
autoOpen: false,
modal: true,
draggable: false,
width: 480,
);
$("#open-popUp").on("click", function()
dialog.dialog("open");
);
$("#dialog").tabs();
$(".ui-tabs-nav a").on("click", function(e)
recenter(dialog);
);
);
【讨论】：
以上是关于如何垂直居中具有不同高度选项卡的对话框？的主要内容，如果未能解决你的问题，请参考以下文章