jQuery自动调整大小后重新定位对话框

Question

我有一个显示动态大小表单的对话框。目前，我使用以下代码使对话框自动调整大小。我希望它在调整大小事件发生后自动重新定位对话框。这是因为对话框调整其宽度，我希望它在调整大小后仍保持在页面中心位置。

  $("#form-div").dialog({
      autoOpen: false,
      width: "auto",
      height: "auto",
      resize: "auto",
      modal: true
  });

  $("#show-form-button").click(function() {
      $("#form-div").dialog("open");
  });

编辑：

为了明确

对话框显示一个表单。在显示表单后，可能会添加其他字段到表单中，导致它不再适合原始的对话框大小。 " resize: 'auto' "选项会自动处理这个问题并调整对话框大小。我希望对话框在自动调整大小后居中显示。

- Curtor

Answer 1

根据文档，在调整大小完成后会触发resizeStop钩子，因此您应该能够像这样进行操作：

$("#form-div").dialog({
      autoOpen: false,
      width: "auto",
      height: "auto",
      resize: "auto",
      modal: true,
      resizeStop: function(event, ui) {
        jQuery(this).dialog('option','position','center');
      }
 });

 $("#show-form-button").click(function() {
     $("#form-div").dialog("open");
 });

- ryanlahue

---

我已经尝试过这个方法，当我手动调整对话框大小时它可以工作，但如果我让它自动调整大小就不行了。 我想到的最好的解决方案是等待表单完成调整大小，然后调用$("#form-div").dialog('option','position','center')。 如果将调整大小设置为自动，通过对话框的设置进行自动重定位似乎是不可行的，因为实际上没有触发任何事件。 - Curtor

@Curtor：您能解释一下是什么原因导致对话框大小调整吗？它是自动调整大小以容纳在初始创建后添加到其中的内容吗？ - ryanlahue

是的，没错。对话框显示一个表单。在表单显示之后，可能会添加其他字段到表单中，导致它不再适合原来的对话框。"resize: 'auto'"选项会自动处理这个问题并调整对话框大小，但不会触发任何事件。 - Curtor

@Curtor：这个线程包含了一个jQuery插件事件的代码，当一个元素的内容改变时触发。也许你可以将其绑定到你的表单容器上，并让回调函数进行调整大小：https://dev59.com/UnM_5IYBdhLWcg3wRw51 - ryanlahue