关闭jQuery模态框后打开新模态框，关闭后页面无法交互求助

我来帮你搞定这个页面无法交互的问题！你遇到的情况，核心原因是jQuery UI的模态遮罩层残留，再加上代码里还有几个容易忽略的小错误，咱们一步步来修复：

先揪出代码里的明显bug #

1. 第二个模态框的加载目标错误
   你看modalSecond_Set的open方法里，居然写的是$('#modalFirst').load(Page);——这会把第二个页面的内容加载到第一个对话框的容器里，直接导致模态框的状态混乱。应该改成$(this).load(Page);（或者明确写$('#modalSecond').load(Page);）。

2. 重复销毁重建对话框的逻辑冗余
   你在每个对话框的close事件里，先调用dialog('destroy')，紧接着又重新初始化对话框，这种重复操作很容易让jQuery UI的遮罩层没有被正确清理，最终留在页面上挡住所有交互。

修复后的完整代码 #

// 页面加载时一次性初始化两个对话框，避免重复创建
$(function() {
    modalFirst_Set();
    modalSecond_Set();
});

function modalFirst_Set() {
    $('#modalFirst').dialog({
        autoOpen: false,
        dialogClass: 'DynamicDialogStyle',
        resizable: true,
        draggable: true,
        modal: true,
        width: 400,
        height: 120,
        title: "My First Modal",

        open: function (type, data) {
            var Page = 'PageFirst.aspx';
            // 加载内容到当前对话框容器
            $(this).load(Page);
        },

        close: function (event, ui) {
            var retValue = $('#modalFirst_RetValue').val();
            if (retValue === 'X') {
                // 打开第二个模态框
                $('#modalSecond').dialog('open');
            }
            // 清空对话框内容，避免下次打开时残留旧数据
            $(this).empty();
        }
    });
}

function modalSecond_Set() {
    $('#modalSecond').dialog({
        autoOpen: false,
        dialogClass: 'DynamicDialogStyle',
        resizable: true,
        draggable: true,
        modal: true,
        width: 400,
        height: 120,
        title: "My Second Modal",

        open: function (type, data) {
            var Page = 'PageSecond.aspx';
            // 修正加载目标，加载到当前对话框容器
            $(this).load(Page);
        },

        close: function (event, ui) {
            // 清空对话框内容
            $(this).empty();
            // 手动移除残留的模态遮罩层，确保页面交互完全恢复
            $('.ui-widget-overlay').remove();
        }
    });
}

// 调用这个函数打开第一个模态框
function modalFirst_Show() {
    $('#modalFirst').dialog('open');
}

修复要点说明 #

• 复用对话框实例：页面加载时只初始化一次对话框，设置autoOpen: false，后续用dialog('open')来触发显示，避免频繁销毁重建导致的状态异常。
• 修正内容加载目标：确保每个对话框的内容加载到自己的容器里，不会互相干扰。
• 手动清理遮罩层：在第二个对话框关闭时，主动移除jQuery UI生成的ui-widget-overlay遮罩层，彻底解决页面被遮挡的问题。
• 清空容器内容：每次关闭对话框时清空内容，防止下次打开时显示旧数据。

额外提醒 #

确保你的HTML页面里已经存在这两个对话框容器：

<div id="modalFirst"></div>
<div id="modalSecond"></div>

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