Magnific Popup – 模态框内的图片库

Question

我已经为内联内容模式框使用了很棒的弹出窗口。此模式中有一个图片库，我也想使用壮丽的弹出窗口。 有没有办法“更深一层”，通过点击图片，进入画廊显示模式，然后退出这个模态框，回到原来的模态框？

感谢您的建议

Answer 1

昨天刚刚实现，所以就这样吧。

var parentPopup = false;
$.magnificPopup.open({
    items: {src: '#inline-content'},
    type: 'inline',
    callbacks: {
        open: function () {
            $('#gallery')
                .off('click')
                .on('click', function(e) {
                    e.stopPropagation();
                    // If an instance is open, keep track and close it
                    if ($.magnificPopup.instance.isOpen) {
                        parentPopup = true;
                        // Here we could also store the parent instance in a global var using $.magnificPopup.instance.clone() to, for example, know which was the parent popup if we have multiple of them.
                        $.magnificPopup.close();
                    }
                })
                .magnificPopup({
                    type: 'image',
                    gallery: {
                        enabled: true
                    },
                    callbacks: {
                        afterClose: function() {
                            // If we come from a parent popup
                            if (parentPopup === true) {
                                // Reopen initial popup here            
                            }
                        }
                    }
                });
        }
    }
});

在你的情况下，我认为跟踪全局变量和两个条件是不必要的，但我的实现更复杂，所以我把它们留在那里。

这里的关键是您必须在打开下一个弹出窗口之前关闭第一个弹出窗口，然后在关闭第二个弹出窗口后重新打开它。

希望对你有帮助。