嵌套放大弹出菜单
Nested Magnific Popup
我想从一个放大弹出项传递到另一个,执行一些操作,然后返回到第一个。为了实现这一点,我用$.aampicPopup.instance.close重写了close方法(在打开第二个元素之前),在该方法中我调用了$.aampICPopup.proto.open()方法。这似乎有效,但我无法将其覆盖回其初始行为,并且第一个弹出窗口的关闭按钮仍然会触发修改后的行为。这里有一个相应的jsfiddle:
https://jsfiddle.net/matthieuG/ddkc83ca/12/
$('.first-popup-link').magnificPopup({
closeBtnInside:true,
callbacks: {
open: function() {
/*var magnificPopup = $.magnificPopup.instance;*/
},
open: function() {
$.magnificPopup.instance.close = function() {
console.log('close override is working');
$.magnificPopup.proto.open({
callbacks:{
open: function() {
console.log('open callback');
$.magnificPopup.instance.close = function() {
$.magnificPopup.proto.close.call(this);
console.log('open close callback');
}
}
},
items: {
src: '#first-popup'
},
type: 'inline'
});
}
}
}
});
$('.second-popup-link').magnificPopup({
closeBtnInside:true,
closeOnBgClick: false,
callbacks: {
beforeOpen: function() {
$.magnificPopup.instance.close = function() {
$.magnificPopup.proto.close.call(this);
console.log('2nd close override is not working');
}
}
}
});
问题是我必须关闭放大弹出窗口的第一个实例。这篇文章帮助我找到了一个可行的解决方案:http://www.4byte.cn/question/173750/callbacks-not-firing-when-opening-a-magnific-popup-from-another-one.html
我的工作解决方案如下:https://jsfiddle.net/matthieuG/zt4coq8f/1/
$('.first-popup-link').magnificPopup({
type: 'inline',
closeBtnInside: true,
closeOnBgClick: false,
closeOnContentClick: false,
callbacks: {
beforeOpen: function() {
$.magnificPopup.instance.close = function() {
$.magnificPopup.proto.close.call(this);
};
// $.magnificPopup.proto.close.call(this);
console.log('before open has been initiated');
}
}
});
$('.second-popup-link').click(function() {
$.magnificPopup.proto.close.call(this);
});
$('.second-popup-link').magnificPopup({
type: 'inline',
closeBtnInside: true,
closeOnBgClick: false,
closeOnContentClick: false,
callbacks: {
beforeOpen: function() {
$.magnificPopup.instance.close = function() {
$.magnificPopup.proto.close.call(this);
$('.first-popup-link').trigger('click');
};
// $.magnificPopup.proto.close.call(this);
console.log('before open has been initiated');
},
close: function() {
console.log('Popup 2 close has been initiated');
}
}
});
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- angular的下拉菜单
- 每15天为新用户加载一次放大弹出菜单
- 嵌套放大弹出菜单
- jQuery放大弹出菜单根本不起作用
- 放大弹出菜单-索引错误
- 箭头未显示在放大弹出菜单库中
- 放大弹出菜单未加载到页面的特定部分
- 放大弹出菜单:选择特定的文件类型
- 仅显示第一项的放大弹出菜单
- 指定回车键关闭放大弹出菜单中的按钮
- 汤博乐图片集字幕无法使用放大弹出菜单
- 带有Wordpress图像的放大弹出菜单(php内容)
- 页面加载时的放大弹出菜单
- 谷歌地图:放大/缩小与平移到特定点,如maps.google.com上下文菜单
- 使用表单元素(输入)初始化放大弹出菜单
- PHP-使用放大弹出菜单显示表单提交后的消息
- 放大弹出菜单-添加底部栏
- BackboneJS放大弹出菜单不工作