Magnific Popup问题：关闭第二个弹窗后重开第一个的实现排查

你猜得完全没错——问题核心就是$.magnificPopup.close()还没执行完毕（它包含异步的关闭动画和DOM清理），你就立刻调用了open()方法，两个操作冲突导致最终两个弹窗都被关闭，第一个弹窗无法正常唤起。

正确的解决方式：利用关闭回调确保操作顺序 #

你可以通过$.magnificPopup.close()的回调参数，在弹窗**完全关闭（包括动画结束）**后再执行打开第一个弹窗的操作，彻底避免冲突：

$('.popup-close').click(function (e) {
    e.preventDefault();
    // 传入关闭回调，确保关闭流程完成后再唤起第一个弹窗
    $.magnificPopup.close({
        callbacks: {
            close: function() {
                console.log("弹窗已关闭，重新打开第一个弹窗");
                $.magnificPopup.open({
                    items: { src: '#firstPopup' },
                    type: 'inline',
                    showCloseBtn: false
                });
            }
        }
    });
});

另一种解耦思路：监听全局关闭事件 #

如果你希望逻辑更灵活，也可以监听Magnific Popup的mfpClose全局事件，但记得添加判断条件避免无限循环：

// 绑定全局关闭事件
$(document).on('mfpClose', function() {
    // 仅当关闭的是第二个弹窗时，才重新打开第一个
    if ($.magnificPopup.instance.content.attr('id') === 'secondPopup') {
        $.magnificPopup.open({
            items: { src: '#firstPopup' },
            type: 'inline',
            showCloseBtn: false
        });
    }
});

// 关闭按钮点击逻辑
$('.popup-close').click(function (e) {
    e.preventDefault();
    $.magnificPopup.close();
});

关键说明 #

• Magnific Popup的close()方法接受配置对象，其中callbacks.close会在弹窗的关闭动画结束、相关DOM清理完成后触发，此时调用open()不会有任何冲突。
• 使用全局事件方式时，一定要加判断条件，否则每次关闭弹窗都会触发重新打开逻辑，可能造成循环唤起的问题。

内容的提问来源于stack exchange，提问作者The Old County