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            
                            }
                        }
                    }
                });
        }
    }
});

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

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

希望它有所帮助。

Magnific Popup - 模态框内的图像库

1 个答案: