我有一个在弹出窗口中打开的表单，并在提交按钮旁边添加了一个自定义 close button。
这是我用于关闭按钮的 jQuery：
$(document).ready(function() {
$('#close').click(function() {
$.magnificPopup.close();
});
});
但是这似乎不起作用。有谁知道怎么做？
【问题讨论】：
iframe，则使用parent.$.magnificPopup.close();。
标签： jquery magnific-popup
如果你的sn-p位于你的主js中，ajax弹窗按钮可能没有绑定到事件。 我想有两种解决方案：
$('#close').on( "click", function() {
$.magnificPopup.close();
});
在你的主 js 中添加这个函数
function closePopup() {
$.magnificPopup.close();
}
并在弹出的 html 中使用这种按钮
<button type="button" onClick="closePopup();">Close</button>
内嵌框架：
如果您的按钮位于 iframe 和主窗口中的 magnificpopup 脚本中，在同一个域中，您可以像这样访问上述功能：
<button type="button" onClick="parent.closePopup();">Close</button>
【讨论】：
closePopup() 函数，但不会触发 $.magnificPopup.close()。我在 PHP 中使用 Ajax 表单，但这没关系。
closePopup的解决方案？只使用 onClick 的东西
试试这个
<pre class="default prettyprint prettyprinted">
<code>
$('#close').click(function(){
$('.mfp-close').trigger('click');
});
</code>
</pre>
【讨论】：
其中一些答案有效，但这取决于您对弹出窗口的实现。如果还是有问题，建议使用回调方法来保证一致性：
$.magnificPopup.open({
items: {
src: $domElement,
type: 'inline'
},
callbacks: {
open: function() {
$('#close-btn').on('click',function(event){
event.preventDefault();
$.magnificPopup.close();
});
}
}
});
希望这会有所帮助！
【讨论】：
需要在弹窗内添加参数closeBtnInside:true。
【讨论】：
这似乎是 magnific pop 中的一个错误。为了在容器内使用按钮，您必须提供 fixedContentPos: true;
以下代码似乎对我有用。希望对您有所帮助。
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
removalDelay: 100, // Delay in milliseconds before popup is removed
mainClass: 'my-mfp-slide-bottom',`enter code here` // Class that is added to popup wrapper and background
closeOnContentClick: false,
closeOnBgClick: false,
showCloseBtn: true,
closeBtnInside: true,
fixedContentPos: true,
alignTop: true,
// settings: {cache:false, async:false},
callbacks: {
open: function () {
},
beforeClose: function () {
this.content.addClass('light-speed-out');
},
close: function () {
this.content.removeClass('light-speed-out');
}
},
midClick: true
});
【讨论】：
$.magnificPopup.close(); ..如果你把它放在你用ajax加载的内容中就可以了
【讨论】：
1.解决方案
下面的方法没有像“open”和“close”这样的简写。
它们应该通过“实例”对象调用。 “实例”仅在至少打开一个弹出窗口时可用。 例如：$.magnificPopup.instance.doSomething();
这里是 magnificPopup 的自定义关闭示例
// 将 magnificPopup 实例保存在变量中
var magnificPopup = $.magnificPopup.instance;
//打开放大实例
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
}, 0);
// 关闭当前打开的弹窗
magnificPopup.close();
// 启用图库时的导航
magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to item #4
// 更新弹出内容。更改“项目”后很有用
magnificPopup.updateItemHTML();
2。解决方案
您可以在弹出窗口中添加一个按钮并在点击事件上分配一个功能，例如：
$('#close-button-verify').click(function(){
//This will close the most recently popped dialog
//This method specially works for auto popped dialogs i.e.
//Popup you opened using $.magnificPopup.open()
$.magnificPopup.close();
});
如果通过 onClick 事件触发弹出窗口，则可以使用相同的 jQuery 对象关闭该弹出窗口
$('#close-button-verify').click(function(){
$('#id_of_button_that_opened_magnificpopup').magnificPopup('close');
});
祝你好运:)
【讨论】：
【讨论】：
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline'
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
<div class="popup-modal mfp-hide">
<h1>Modal</h1>
<p>Modal Description.</p>
<p><a class="popup-modal-dismiss mfp-close-btn-in" href="#">Close</a></p>
</div>
【讨论】：