jQuery Magnific Popup：如何在弹出窗体中添加自定义关闭按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28596556/
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
Magnific Popup: How to add a custom close button inside a popup form?
提问by user1448031
I have a form that opens up on a popup and have added a custom close buttonnext to a submit button.
我有一个在弹出窗口中打开的表单，并在close button提交按钮旁边添加了一个自定义。
This is a jQuery I am using for the close button:
这是我用于关闭按钮的 jQuery：
$(document).ready(function() {
$('#close').click(function() {
$.magnificPopup.close();
});
});
However this does not seem to work. Does anyone know how to do this?
然而，这似乎不起作用。有谁知道如何做到这一点？
回答by seba
If your snippet is located in your main js, the ajax popup button may not be binded to the event. I imagine two solutions :
如果您的代码段位于主 js 中，则 ajax 弹出按钮可能未绑定到事件。我想象两种解决方案：
Use "on" instead of "click" :(not tested)
使用“on”而不是“click”：（未测试）
$('#close').on( "click", function() {
$.magnificPopup.close();
});
Or do it that way : (tested)
或者那样做：（经过测试）
add this function in your main js
在你的主js中添加这个函数
function closePopup() {
$.magnificPopup.close();
}
And use this kind of button in your popup html
并在弹出的 html 中使用这种按钮
<button type="button" onClick="closePopup();">Close</button>
Iframe :
框架：
If your button is located in an iframe and the magnificpopup script in the main window, on the same domain, you can access the above function like this :
如果您的按钮位于 iframe 和主窗口中的 magnificpopup 脚本中，在同一个域中，您可以像这样访问上述功能：
<button type="button" onClick="parent.closePopup();">Close</button>
回答by PaulusCh
try this
尝试这个
<pre class="default prettyprint prettyprinted">
<code>
$('#close').click(function(){
$('.mfp-close').trigger('click');
});
</code>
</pre>
回答by ChongFury
Some of these answers work, but it depends on your implementation of the popup. If you're still having trouble, I'd suggest using the callback method to ensure consistency:
其中一些答案有效，但这取决于您对弹出窗口的实现。如果您仍然遇到问题，我建议您使用回调方法来确保一致性：
$.magnificPopup.open({
items: {
src: $domElement,
type: 'inline'
},
callbacks: {
open: function() {
$('#close-btn').on('click',function(event){
event.preventDefault();
$.magnificPopup.close();
});
}
}
});
Hope this helps!
希望这可以帮助！
回答by albert_rar
You need to add inside popup parameters closeBtnInside:true.
您需要添加内部弹出参数closeBtnInside:true。
回答by Ghufran Yousafi
It seems like a bug in magnific pop up. In order to use button inside container you have to supply fixedContentPos: true;
这似乎是 magnific pop up 中的一个错误。为了在容器内使用按钮，您必须提供 fixedContentPos: true;
following code seems to work for me fine. Hope it helps.
以下代码似乎对我有用。希望能帮助到你。
$('.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
});
回答by Eugen G.
$.magnificPopup.close(); .. would work if you put it in your content loaded with ajax
$.magnificPopup.close(); .. 如果你把它放在加载了 ajax 的内容中会起作用
回答by Aysad K.
1. Solution
一、解决方案
Methods below don't haveshorthand like "open" and "close".
下面的方法没有像“打开”和“关闭”这样的简写。
They should be called through "instance" object. "instance" is available only when at least one popup was opened. For example: $.magnificPopup.instance.doSomething();
它们应该通过“实例”对象调用。“实例”仅在至少打开一个弹出窗口时可用。例如：$.magnificPopup.instance.doSomething();
here example of customized close for magnificPopup
这里是 magnificPopup 的自定义关闭示例
// save magnificPopup instance in variable
// 将 magnificPopup 实例保存在变量中
var magnificPopup = $.magnificPopup.instance;
//open magnific instance
//打开放大实例
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
}, 0);
// Close popup that is currently opened
// 关闭当前打开的弹窗
magnificPopup.close();
// Navigation when gallery is enabled
// 启用图库时的导航
magnificPopup.next(); // go to next item
magnificPopup.prev(); // go to prev item
magnificPopup.goTo(4); // go to item #4
// updates the popup content. Useful after you change "items"
// 更新弹出内容。更改“项目”后很有用
magnificPopup.updateItemHTML();
2. Solution
2. 解决方案
you can add a button within the popup and assign a function on click event like:
您可以在弹出窗口中添加一个按钮并为单击事件分配一个功能，例如：
$('#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();
});
If popup is triggered via onClick event then the same jQuery Object can be used to close that popup
如果弹出窗口是通过 onClick 事件触发的，那么可以使用相同的 jQuery 对象来关闭该弹出窗口
$('#close-button-verify').click(function(){
$('#id_of_button_that_opened_magnificpopup').magnificPopup('close');
});
good luck :)
祝你好运 ：）
回答by Demiurg
The simplest way is to add "mfp-close" class to your control, something like this:
最简单的方法是将“mfp-close”类添加到您的控件中，如下所示：
<a href="#" title="Close" type="button" class="btn btn-default mfp-close">Close</a>
Here Bootstrap classes also used to make link looks like button - doesn't matter.
这里 Bootstrap 类也用于使链接看起来像按钮 - 没关系。
回答by rvirk
$(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>
