Jquery对话框在打开前调整大小，但对话框以以前的宽度-高度打开答案

【问题标题】：Jquery dialog resize before opening but dialog opens with previous width-heightJquery对话框在打开前调整大小，但对话框以以前的宽度-高度打开
【发布时间】：2020-07-10 20:55:07
【问题描述】：

当单击侧边栏上的按钮时，我正在使用 jquery 对话框打开一个屏幕。基本上，当点击按钮时，会运行以下代码：

resizeDialog();
$("#dashboardContainer").dialog("open");

function resizeDialog() {
    var relativeDiv, relativeHeight, relativeWidth, relativeMy;

    if(myData.opening_type == 'full') {
        relativeDiv = '#sContainer';
        relativeWidth = '328';
        relativeMy = 'left top';

    } else {
        relativeDiv = '#cContainer';
        relativeMy = 'right top';

        var mqDesktop2 = window.matchMedia( "(min-width : 1500px) and (max-width : 1750px)" );
        var mqMobile = window.matchMedia( "(min-width:700px) and (max-width: 1500px)" );

        if(mqMobile.matches) {
            relativeWidth = '648';

        } else if(mqDesktop2.matches) {
            relativeWidth = '968';

        } else {
            relativeWidth = '1320';
        };
    }
    relativeHeight =  $(window).height() - ($("#cContainer").offset().top) - 20;

    $("#myDialog")
        .dialog( "option", "height", relativeHeight)
        .dialog( "option", "width", relativeWidth)
        .dialog( "option", "position", { my: relativeMy, at: "right top", of: relativeDiv, } );
}

但是，当我经常（一个接一个地）单击按钮时，对话框会以之前的大小打开。当我在打开对话框之前添加超时时，它会运行。但我不想添加超时，因为必须立即打开对话框。您还有其他解决方案可以建议吗？

【问题讨论】：

不清楚为什么您认为对话框会调整大小。不确定您指的是什么“按钮”。请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example
侧边栏中的每个按钮都会打开不同宽度和高度的对话框。按钮只是按钮，它们都有 onclick 事件，每个 onclick 都会打开对话框并在其中放入不同的 iframe。但是在打开对话框之前，当我给出高度-宽度时它可以工作，但是如果我经常点击（这意味着经常关闭打开的对话框），对话框会以之前的宽度-高度打开。
我在您的示例中没有看到这些按钮。如果没有适当的例子，人们将很难为您提供帮助。

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

我无法重现您描述的问题。我创建了以下测试。

$(function() {
  function resizeDialog(dlg, w, h, cb) {
    dlg.dialog("option", {
      height: h,
      width: w
    });
    if (cb != undefined) {
      cb();
    }
  }
  $("[id^='dialog']").dialog({
    autoOpen: false
  });
  resizeDialog($("#dialog-1"), 200, 320, function() {
    $("#dialog-1").dialog("open");
  });
  resizeDialog($("#dialog-2"), 120, 120);
  $("#dialog-2").dialog("option", "position", {
    my: "left top",
    at: "left+10 top+10",
    of: window
  }).dialog("open");
})

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="dialog-1" title="Basic dialog 1">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div id="dialog-2" title="Basic dialog 2">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

我能够以与您的脚本类似的方式调整它们的大小并open 它们。我会添加一些检查以确保您获得预期的相对值。

【讨论】：