第二个 jQuery 对话框保留前一个对话框的高度

Question

当我的 jQuery 对话框从前一个 jQuery 对话框中弹出时，我发现它的高度存在问题。在下面的示例中，第一个对话框正确显示为 200 宽 x 200 高。单击“确定”按钮应关闭第一个对话框并打开 400 宽 x 400 高的第二个对话框，但它没有：第二个对话框显示为 200 宽 x 400 高。

我最初在使用 jQuery 1.11.2 时发现了这个问题，但它也在 3.2.1 中重现。

该示例在我的环境中工作，但我是 jsfiddle 新手，无法在这里工作。

有人可以告诉我我做错了什么或提供解决方法吗？谢谢。

$(document).ready(function() {

  $("#testBox").dialog({
    dialogClass: "customDialog",
    autoOpen: false,
    draggable: false,
    modal: true,
    show: {
      effect: "blind",
      duration: 100
    },
    hide: {
      effect: "blind",
      duration: 100
    }
  });
});

function openTestDialog() {
  $('#testBox').html('<p>first pop</p>');
  $('#testBox').dialog("option", "title", "Title of the dialog");
  $('#testBox').dialog("option", "width", 200);
  $('#testBox').dialog("option", "height", 200);
  $('#testBox').dialog("option", "modal", true);
  $('#testBox').dialog({
    buttons: [{
      text: "Pop 2nd",
      click: function() {
        $(this).dialog("close");
        pop2();
      }
    }]
  });
  $('#testBox').dialog("open");

}

function pop2() {
  $('#testBox').html('<p>second pop</p>');
  $('#testBox').dialog("option", "title", "Title of the second dialog");
  $('#testBox').dialog("option", "width", 400);
  $('#testBox').dialog("option", "height", 400);
  $('#testBox').dialog("option", "modal", true);
  $('#testBox').dialog({
    buttons: [{
      text: "OK",
      click: function() {
        $(this).dialog("close");
      }
    }]
  });
  $('#testBox').dialog("open");

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="testBox"></div>
<button type="button" onclick="openTestDialog();">First pop</button>

Answer 1

我不确定为什么它不起作用，但我会说在这种情况下你真的需要 2 个单独的对话框。您将它们用于不同的目的，因此它们实际上是 2 个独立的实体。这也解决了您的问题：

$('#testButton').on('click', function() {
    openTestDialog();
  })

  function openTestDialog() {
    $('#testBox').html('<p>first pop</p>');
    $('#testBox').dialog({
      title: "Title of the dialog",
      width: 200,
      height: 200,
      modal: true,
      buttons: [{
        text: "Pop 2nd",
        click: function() {
          $(this).dialog("close");
          pop2();
        }
      }]
    });
    $('#testBox').dialog("open");

  }

  function pop2() {
    $('#testBox2').html('<p>second pop</p>');
    $('#testBox2').dialog({
      title: "Title of the second dialog",
      width: 400,
      height: 400,
      modal: true,
      buttons: [{
        text: "OK",
        click: function() {
          $(this).dialog("close");
        }
      }]
    });
    $('#testBox2').dialog("open");
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>


<div id="testBox"></div>
<div id="testBox2"></div>
<button id="testButton" type="button">First pop</button>