Question

我知道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>label{width: 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>

Answer 1

我在这里找到了一个有用的消息：How to auto-center jQuery UI dialog when resizing browser?

要使用的代码段是：

$("#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);
  });
});

如何使用不同高度的标签垂直中心对话框？

1 个答案: