javascript 如何在 magnific popup plugin 中的 popup 中打开 popup
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21908580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to open popup within popup in magnific popup plugin
提问by Yogesh Saroya
can anybody tell me how to open popup within popup using magnific-popup jquery plugin (using ajax).
谁能告诉我如何使用 magnific-popup jquery 插件（使用 ajax）在弹出窗口中打开弹出窗口。
$('.ajax-popup-link').magnificPopup({
type: 'ajax'
});
<a href="path-to-file.html" class="ajax-popup-link"> Link 1 </a>
on "path-to-file.html"
在“文件路径.html”上
<a href="path-to-other-file.html" class="ajax-popup-link"> next popup </a>
Thanks
谢谢
采纳答案by Dmitry Semenov
You can't have two windows open at once. But the content of popup is replaced when is called second time, here is example - http://codepen.io/dimsemenov/pen/hwIng
你不能同时打开两个窗口。但是第二次调用时弹出的内容被替换，这里是例子 - http://codepen.io/dimsemenov/pen/hwIng
回答by Lee Price
I know this an old thread, but for anyone still interested, this worked for me:
我知道这是一个旧线程，但对于仍然感兴趣的任何人，这对我有用：
$(document).on('click', '.sAjax', function(e){
$.magnificPopup.close(); // Close existing popup
// Open new popup
$.magnificPopup.open({
items: {
src: 'new-page.html',
type: 'ajax'
}
});
e.preventDefault();
});
Don't forget to give your link the new class of .sAjax
不要忘记给你的链接新的类 .sAjax
回答by patrickzdb
This is possible as long as you have next and previous links within the page that you are pulling in via ajax.
只要您在通过 ajax 拉入的页面中有下一个和上一个链接，这就是可能的。
This worked for me:
这对我有用：
$('.js-pack').magnificPopup({
delegate: '.js-mfp-ajax',
type: 'ajax',
closeOnBgClick: false,
mainClass: 'mfp-fade',
removalDelay: 300,
overflowY: 'scroll',
gallery: {
enabled: true
},
callbacks: {
ajaxContentAdded: function() {
$('.prev-next .next-link').click(function(event){ event.preventDefault(); $.magnificPopup.next(); });
$('.prev-next .prev-link').click(function(event){ event.preventDefault(); $.magnificPopup.prev(); });
}
}
});
They key parts to add are gallery: enabledand the callbacksparameters.
他们要添加的关键部分是gallery: enabled和callbacks参数。
The HTML of my next-prev buttons is pretty simple:
我的下一个上一个按钮的 HTML 非常简单：
<div class="prev-next">
<a class="btn prev-link" href="http://prev-url" rel="prev">? Previous</a>
<a class="btn next-link" href="http://next-url" rel="next">Next ?</a>
</div>
回答by Someone33
You can do it by making a simple ajax request:
您可以通过发出一个简单的 ajax 请求来实现：
$('a.your-link').on('click',function(e){
e.preventDefault();
$.ajax({
type: "GET", // or POST
url: 'url_to_php_page.php',
data: {
get_request_id : $(this).data('id'), // assign a data-id to the link
},
success: function(data){
$.magnificPopup.open({
type: 'inline',
closeOnContentClick: false,
items: {
src: data
}
})
}
});
});
Then on server side you retrieve the get_request_idwith $_GET['get_request_id']or $_POST['get_request_id'].
然后在服务器端检索get_request_idwith$_GET['get_request_id']或$_POST['get_request_id']。
