放大弹出窗口：如何在弹出表单中添加自定义关闭按钮？

Question

我有一个表单，它在弹出窗口中打开，并添加了一个自定义的提交按钮旁边的 关闭按钮。

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

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

然而，这似乎不起作用。有人知道如何做吗？

- user1448031

---

如果magnificPopup类型为iframe，则使用parent.$.magnificPopup.close();。 - sglessard

Answer 1

如果你的代码片段位于主要js中，则ajax弹出窗口按钮可能未绑定到事件。 我想到了两个解决方案：

使用“on”而不是“click”：（未经测试）

如果您的片段位于主JS中，则Ajax弹出式按钮可能未绑定到事件。我想到两个解决方法：

使用"on"代替"click"：（未经测试）

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

- seba

---

很遗憾，这仍然不起作用。当单击按钮时，将调用closePopup()函数，但未触发$.magnificPopup.close()。我正在使用PHP中的Ajax表单，但这不应该有影响。 - user1448031

你是否尝试在弹出窗口中加载一个iframe？ - seba

是的，我正在使用 iframe。 - user1448031

有没有不需要额外的jQuery内联函数closePopup的解决方案？有没有只使用onClick的东西？ - basZero

Answer 2

试试这个

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

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

</code>
</pre>

- PaulusCh

---

$('.mfp-close').trigger('click'); 对我有用，谢谢！ - Fernando

Answer 3

一些答案可以起到作用，但这取决于您的弹出窗口实现方式。 如果您仍然遇到问题，建议使用回调方法以确保一致性：

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

希望这能帮到你！

- ChongFury

Answer 4

您需要在弹出窗口参数中添加 closeBtnInside:true。

- albert_rar

Answer 5

似乎是magnific pop up中的一个bug。为了在容器内使用按钮，您需要提供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

    });

- Ghufran Yousafi

Answer 6

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

// 更新弹出内容。在更改“items”之后很有用

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');
 });

祝你好运 :)

- Aysad K.

Answer 7

在 Magnific Popup 文档中已经有一个现成的答案。

它是：

$('.popup-link').magnificPopup({
     closeMarkup: '<button title="%title%" type="button" class="mfp-close"> {enter your custom markup here} </button>',
     tClose: 'Button title',
});

- Stephanie Poulin

Answer 8

如果您将$.magnificPopup.close()放入通过ajax加载的内容中，它会起作用。

- Eugen G.

---

请您能否详细阐述一下您的答案，并添加更多关于所提供解决方案的描述？ - abarisone

Answer 9

最简单的方法是将“mfp-close”类添加到您的控件中，类似于以下代码：

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

这里还使用了Bootstrap类来使链接看起来像按钮-这不重要。

- Demiurg

---

这只是在右上角添加了一个关闭的div，而不是这里所要求的内容。 - basZero

Answer 10

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

- rvirk