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

Question

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

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

该示例适用于我的环境，但我是jsfiddle的新手，无法在此工作。

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

＆＃13;

＆＃13;

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

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;