我有一个相当基本的设置:
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
callbacks: {
ajaxContentAdded: function () {
$('.image-link').magnificPopup();
};
}
});
我想做的是将“图像链接”弹出窗口的关闭事件返回到原始弹出窗口。我的第一个想法是抓住原始元素并将其传递给第二个弹出窗口,然后将close事件绑定到该元素......这样当它关闭时,它会自动弹出原始元素。
还有其他人做过这样的事吗?是否有更好的方法可以做到这一点?
答案 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');
}
}
}
});