Magnific Popup - 弹出窗口中的弹出窗口。如何使“关闭”转到上一个弹出窗口?

时间:2013-09-24 16:27:08

标签: jquery magnific-popup

我有一个相当基本的设置:

 $('.ajax-popup-link').magnificPopup({
        type: 'ajax',
        callbacks: {
            ajaxContentAdded: function () {
                $('.image-link').magnificPopup();
            };
        }
}); 

我想做的是将“图像链接”弹出窗口的关闭事件返回到原始弹出窗口。我的第一个想法是抓住原始元素并将其传递给第二个弹出窗口,然后将close事件绑定到该元素......这样当它关闭时,它会自动弹出原始元素。

还有其他人做过这样的事吗?是否有更好的方法可以做到这一点?

1 个答案:

答案 0 :(得分:1)

可能,实现你想要的唯一方法是采用原始元素并重新打开它。但是将它传递给第二个弹出窗口close回调将不会给你任何东西,因为它永远不会被调用。如果弹出窗口已经打开,MagnificPopup将不会触发open事件,因为实际上只有一个Magnific Popup Object实例。你可以做的是检查currItem是否等于第一个弹出的项目。

var childOpened,
    parentItem,
    $parent = $('.ajax-popup-link');
$parent.magnificPopup({
    type: 'ajax',
    callbacks: {
        open: function () {
            // triggered only when 1st popup opens
            // save 1st popup's item
            parentItem = this.currItem;
            // will not register new callbacks even if we pass them
            $('.image-link').magnificPopup();
        },
        close: function () {
            // will be called twice, since we opened popup twice
            // do not move to `afterClose`. `currItem` is not available there
            childOpened = (this.currItem !== parentItem);
        },
        afterClose: function () {
            if (childOpened) {
                // should be in `afterClose` to avoid conflicts
                // with previous popup opening
                $parent.magnificPopup('open');
            }
        }
    }
});