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

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

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

这个例子可以在我的环境中使用，但我是JSFIDLE新手，在这里无法使用它

有人能告诉我我做错了什么，或者提供一个解决方法吗？谢谢

$（文档）.ready（函数（）{
$（“#测试框”）。对话框({
dialogClass:“自定义对话框”，
自动打开：错误，
可拖动：错误，
莫代尔：是的，
展示：{
效果：“盲”，
持续时间：100
},
隐藏：{
效果：“盲”，
持续时间：100
}
});
});
函数openTestDialog（）{
$（'#testBox'）.html（'first-pop
'）；
$（'#testBox'）。对话框（“选项”、“标题”、“对话框标题”）；
$（'#testBox'）。对话框（“选项”，“宽度”，200）；
$（'#testBox'）。对话框（“选项”，“高度”，200）；
$（'#testBox'）。对话框（“选项”，“模态”，true）；
$（'#testBox'）。对话框({
按钮：[{
文字：“第二次流行”，
单击：函数（）{
$（此）.dialog（“关闭”）；
pop2（）；
}
}]
});
$（'#testBox'）。对话框（“打开”）；
}
函数pop2（）{
$（'#testBox'）.html（'second-pop
'）；
$（'#testBox'）。对话框（“选项”、“标题”、“第二个对话框的标题”）；
$（'#testBox'）。对话框（“选项”，“宽度”，400）；
$（'#testBox'）。对话框（“选项”，“高度”，400）；
$（'#testBox'）。对话框（“选项”，“模态”，true）；
$（'#testBox'）。对话框({
按钮：[{
文字：“OK”，
单击：函数（）{
$（此）.dialog（“关闭”）；
}
}]
});
$（'#testBox'）。对话框（“打开”）；
}

第一次弹出

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

$（'testButton'）。在（'click'，function（）上{
openTestDialog（）；
})
函数openTestDialog（）{
$（'#testBox'）.html（'first-pop
'）；
$（'#testBox'）。对话框({
标题：“对话框的标题”，
宽度：200，
身高：200，
莫代尔：是的，
按钮：[{
文字：“第二次流行”，
单击：函数（）{
$（此）.dialog（“关闭”）；
pop2（）；
}
}]
});
$（'#testBox'）。对话框（“打开”）；
}
函数pop2（）{
$（'#testBox2'）.html（'second-pop
'）；
$（'#testBox2'）。对话框({
标题：“第二个对话框的标题”，
宽度：400，
身高：400，
莫代尔：是的，
按钮：[{
文字：“OK”，
单击：函数（）{
$（此）.dialog（“关闭”）；
}
}]
});
$（'#testBox2'）。对话框（“打开”）；
}

第一个pop是高度还是宽度的问题？事实上，我两者都有问题，但不是同时出现的。我不确定发生了什么，但当我检查DOM元素时，它有
height:auto
，而不是由代码设置的高度。我不知道为什么。也许你应该在forums.jquery.com上问一下，或者提交一份bug报告。谢谢你的建议。我会考虑使用2个div。然而，这个例子是我开发的一个函数的简化版本，它重用了相同的div。除此之外，它可以工作。对话框UI应可调整大小。也许删除div、重新添加和重新初始化将是一个解决办法。我采用的解决方案是销毁对话框并重新创建它。这个问题看起来像一个bug。不过，感谢Jeff B指出解决方案。