Question

我有一个表单可以在弹出窗口中打开，并在提交按钮旁添加了自定义close button。

这是我用于关闭按钮的jQuery：

$(document).ready(function() {
    $('#close').click(function() {
        $.magnificPopup.close();
    });
});

然而，这似乎不起作用。有谁知道怎么做？

Answer 1

如果您的代码段位于主js中，则ajax弹出按钮可能不会绑定到该事件。我想象两个解决方案：

使用＆＃34; on＆＃34;而不是＆＃34;点击＆＃34; :(未经测试）

$('#close').on( "click", function() {
  $.magnificPopup.close();
});

或者这样做:(测试）

在主js中添加此功能

function closePopup() {
  $.magnificPopup.close();
}

在弹出式HTML

中使用此类按钮

<button type="button" onClick="closePopup();">Close</button>

iframe：

如果您的按钮位于iframe中，并且主窗口中的magnificpopup脚本位于同一个域上，则您可以像这样访问上述功能：

<button type="button" onClick="parent.closePopup();">Close</button>

Answer 2

试试这个

<pre class="default prettyprint prettyprinted">
<code>

    $('#close').click(function(){
        $('.mfp-close').trigger('click');
      });

</code>
</pre>

Answer 3

您需要添加内部弹出参数closeBtnInside:true。

Answer 4

这似乎是一个巨大的弹出错误。要在容器内使用按钮，您必须提供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

    });

Answer 5

其中一些答案有效，但这取决于您对弹出窗口的实现。如果您仍然遇到问题，我建议您使用回调方法确保一致性：

$.magnificPopup.open({
  items: {
    src: $domElement,
    type: 'inline'
  }, 
  callbacks: {
    open: function() { 
        $('#close-btn').on('click',function(event){
          event.preventDefault();
          $.magnificPopup.close();
        }); 
    }
  }
});

希望这有帮助！

Answer 6

。

$ magnificPopup.close（）; 如果你把它放在用ajax

加载的内容中，它会起作用

Answer 7

<强> 1。解决方案

以下方法没有“开放”和“关闭”之类的速记。

应该通过“实例”对象调用它们。 “实例”仅在至少打开一个弹出窗口时可用。例如： $。magnificPopup.instance.doSomething（）;

此处为magnificPopup的自定义关闭示例

//将magnificPopup实例保存在变量
中
var magnificPopup = $.magnificPopup.instance;

//打开magnific实例

$.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 Object关闭该弹出窗口

$('#close-button-verify').click(function(){
    $('#id_of_button_that_opened_magnificpopup').magnificPopup('close');
 });

祝你好运：）

Answer 8

最简单的方法是添加＆＃34; mfp-close＆＃34;你的控制课程，如下：

    <a href="#" title="Close" type="button" class="btn btn-default mfp-close">Close</a>

这里Bootstrap类也用来使链接看起来像按钮 - 没关系。

Answer 9

$(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>

Magnific Popup：如何在弹出窗体中添加自定义关闭按钮？

9 个答案:

使用＆＃34; on＆＃34;而不是＆＃34;点击＆＃34; :(未经测试）

或者这样做:(测试）