JQuery Dialog预调尺寸后仍以旧宽高打开的问题求助

我明白你遇到的困扰——连续快速点击侧边栏按钮时，弹窗总是用上一次的尺寸打开，加延时虽然能解决，但拖慢了响应速度影响体验。咱们可以从Dialog的状态管理和参数更新逻辑入手，让弹窗立即打开且尺寸完全正确。

问题根源 #

当你频繁点击按钮时，弹窗可能还处于已打开状态，此时直接调用dialog("open")不会重新触发尺寸的渲染逻辑，而resizeDialog()里设置的参数因为Dialog已经完成初始化，无法自动触发重绘，导致旧尺寸被复用。

解决方案：分状态处理弹窗 #

修改点击事件逻辑，先判断弹窗是否已经打开：如果已打开，就强制刷新尺寸和位置；如果未打开，再执行打开操作。同时优化尺寸计算的逻辑，确保参数是实时最新的。

1. 优化点击事件处理

// 假设你的侧边栏按钮选择器是#sidebarButton
$("#sidebarButton").on("click", function() {
    const dialog = $("#dashboardContainer");
    // 先计算最新的尺寸和位置参数
    resizeDialog();
    
    if (dialog.dialog("isOpen")) {
        // 弹窗已打开，强制刷新尺寸和位置（重新应用参数触发重绘）
        dialog.dialog("option", "position", dialog.dialog("option", "position"));
        dialog.dialog("option", "height", dialog.dialog("option", "height"));
        dialog.dialog("option", "width", dialog.dialog("option", "width"));
    } else {
        // 弹窗未打开，直接执行打开操作
        dialog.dialog("open");
    }
});

2. 优化resizeDialog函数

把DOM元素选择缓存起来，避免重复查询DOM；同时把宽度值改成数字类型（jQuery Dialog更推荐用数字表示像素单位，减少类型转换问题）：

function resizeDialog() {
    const dialog = $("#dashboardContainer");
    let relativeDiv, relativeWidth, relativeMy;
    const windowHeight = $(window).height();
    const cContainerTop = $("#cContainer").offset().top;

    if(myData.opening_type === 'full') {
        relativeDiv = '#sContainer';
        relativeWidth = 328;
        relativeMy = 'left top';
    } else {
        relativeDiv = '#cContainer';
        relativeMy = 'right top';
        const mqDesktop2 = window.matchMedia("(min-width: 1500px) and (max-width: 1750px)");
        const mqMobile = window.matchMedia("(min-width:700px) and (max-width: 1500px)");
        
        if(mqMobile.matches) {
            relativeWidth = 648;
        } else if(mqDesktop2.matches) {
            relativeWidth = 968;
        } else {
            relativeWidth = 1320;
        }
    }
    const relativeHeight = windowHeight - cContainerTop - 20;

    // 直接更新Dialog的选项，不受当前弹窗状态影响
    dialog
        .dialog("option", "height", relativeHeight)
        .dialog("option", "width", relativeWidth)
        .dialog("option", "position", {
            my: relativeMy,
            at: "right top",
            of: relativeDiv,
        });
}

额外优化：监听窗口 resize 事件（可选） #

如果你的页面支持窗口缩放，还可以在窗口大小改变时自动调整弹窗尺寸，进一步提升体验：

$(window).on("resize", function() {
    const dialog = $("#dashboardContainer");
    if (dialog.dialog("isOpen")) {
        resizeDialog();
        // 强制刷新弹窗布局
        dialog.dialog("option", "position", dialog.dialog("option", "position"));
    }
});

这样修改后，不管你多快点击按钮，弹窗都会立即使用最新计算的尺寸打开或更新，完全不需要依赖延时。

内容的提问来源于stack exchange，提问作者lesstalkmorecode