如何在MVC5的两个不同布局视图中保持同一个弹出窗口持续显示？

方案1：复用弹窗引用，跨页面维持弹窗关联 #

你通过window.open打开的弹窗本身是独立的浏览器窗口，默认场景下父窗口整页跳转（从View1切到View2）时弹窗不会自动关闭，遇到的问题大概率是跳转后父页面丢失了对弹窗的引用，或是原有逻辑里页面卸载时主动触发了弹窗关闭，可按如下逻辑优化：

• 调整Layout1中的弹窗触发逻辑，打开弹窗时将状态存入同域共享的sessionStorage

ShowPopup = function () {
    const popup = window.open('/Home/OpenPopup', "PopupWindow", 'width=400px,height=400px,top=150,left=250');
    // 存储弹窗打开状态和位置信息
    sessionStorage.setItem('popupOpened', 'true');
    sessionStorage.setItem('popupX', popup.screenX);
    sessionStorage.setItem('popupY', popup.screenY);
    // 监听弹窗手动关闭事件，同步更新存储状态
    popup.addEventListener('beforeunload', () => {
        sessionStorage.removeItem('popupOpened');
        sessionStorage.removeItem('popupX');
        sessionStorage.removeItem('popupY');
    });
}

• 在Layout2的页面初始化脚本中读取存储状态，仅获取已有弹窗引用，不重复打开弹窗

window.addEventListener('load', () => {
    if (sessionStorage.getItem('popupOpened') === 'true') {
        // 第二个参数传和之前完全一致的窗口名，不会重新打开弹窗、也不会触发弹窗刷新，仅获取已有引用
        const existingPopup = window.open('', "PopupWindow");
        // 弹窗被用户手动关闭时重置状态
        if (!existingPopup || existingPopup.closed) {
            sessionStorage.removeItem('popupOpened');
            sessionStorage.removeItem('popupX');
            sessionStorage.removeItem('popupY');
            return;
        }
        // 可选：强制弹窗复位到原始位置
        const targetX = parseInt(sessionStorage.getItem('popupX'));
        const targetY = parseInt(sessionStorage.getItem('popupY'));
        existingPopup.moveTo(targetX, targetY);
    }
});

方案2：改用iframe嵌套视图，避免整页跳转影响 #

如果是整页刷新导致的偶发弹窗异常，可以新增一个统一的顶层父Layout，只负责承载iframe和弹窗逻辑，View1、View2切换时仅修改iframe的src，顶层窗口全程不刷新，挂载在顶层窗口的弹窗完全不会受视图切换影响，也不会出现位移或消失的问题。

方案3：改用页面内悬浮层替代独立弹窗 #

如果可以接受不新开独立浏览器窗口，直接把弹窗做成全局DOM悬浮层，将弹窗的HTML、控制逻辑放到两个Layout都引用的公共分部视图/公共脚本中，切换视图时把弹窗的打开状态、位置、内容存入sessionStorage，View2加载时读取状态直接渲染弹窗到对应位置即可，完全不存在跨页面关联的兼容问题。

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