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

Posted 2023-05-08

【中文标题】Jquery对话框在打开前调整大小，但对话框以以前的宽度-高度打开

【英文标题】：Jquery dialog resize before opening but dialog opens with previous width-height

【发布时间】：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,  );

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

【问题讨论】：

不清楚为什么您认为对话框会调整大小。不确定您指的是什么“按钮”。请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example

侧边栏中的每个按钮都会打开不同宽度和高度的对话框。按钮只是按钮，它们都有 onclick 事件，每个 onclick 都会打开对话框并在其中放入不同的 iframe。但是在打开对话框之前，当我给出高度-宽度时它可以工作，但是如果我经常点击（这意味着经常关闭打开的对话框），对话框会以之前的宽度-高度打开。

我在您的示例中没有看到这些按钮。如果没有适当的例子，人们将很难为您提供帮助。

【参考方案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 它们。我会添加一些检查以确保您获得预期的相对值。