Question

希望你能帮助我。我再次阅读并阅读了Magnific Popup的文档，但我对javascript不够好。

1-我用这个链接打开一个弹出窗口：

<a href="mysubpage.html" class="pop">OPEN POPUP</a>

和这个javascript：

$('.pop').magnificPopup({ type:'iframe', showCloseBtn : true, closeOnBgClick : true, midClick: true });

2-在我的弹出式窗口中，我想要一个“关闭”按钮来关闭弹出窗口。

我试试这个，但它不起作用：

<input type="button" value="CLOSE" onclick="magnificPopup.close();" />
<input type="button" value="CLOSE" onclick="$.magnificPopup.close();" />
<input type="button" value="CLOSE" onclick="$('pop').magnificPopup.close();" />
<a href="#" class="mpf-close">CLOSE</a>
<a href="#" onclick="magnificPopup.close();">CLOSE</a>

我读过我需要放置此代码：

var magnificPopup = $.magnificPopup.instance;

但是在哪里？在哪个页面？什么语法？

Magnific Popup文档：LINK

感谢您的帮助。祝你有个美好的一天; - ）

Answer 1

以下内容有效。添加按钮（或任何其他元素）

<button id="my-custom-close">close</button>

...和这个javascript

$('#my-custom-close').click(function(){
    //This will close popup dialog opened using $.magnificPopup.open()
    $.magnificPopup.close();
});

Answer 2

可以选择添加关闭按钮，以及在弹出窗口中显示的选项。我不会使用自定义按钮或元素来尝试关闭弹出窗口，一旦设置了这两个选项，它就应该包含在弹出窗口中。

<a href='#' class='pop'>Open Popup</a>

$('.pop').magnificPopup({ 
  // main options
  showCloseBtn: true,
  closeBtnInside: true,

  gallery: {
    // options for gallery
    enabled: true
  },
  image: {
    // options for image content type
    titleSrc: 'title'
  }

});

jQuery magnific-popup：在弹出窗口中创建一个按钮以关闭弹出窗口

2 个答案: