Magnific Popup：打开时如何修改 showCloseBtn 和 closeOnBgClick？

Question

有没有办法编辑 magnific popup 的打开实例？在一种状态下，我希望弹出窗口是可关闭的，而在另一种状态下，我想阻止用户关闭。这些选项似乎只适用于初始化：

$('.target-div').magnificPopup({
    delegate: 'a',
    type: "inline",
    closeOnBgClick: true,
    showCloseBtn: true,
    gallery: {
        enabled: false
}})

然后，当弹出窗口打开时，我想阻止意外关闭并带走 X 按钮。

$('.target-div').magnificPopup({
    delegate: 'a',
    type: "inline",
    closeOnBgClick: false,
    showCloseBtn: false,
    gallery: {
        enabled: false
}})

Answer 1

MagnificPopup 在 jQuery var ($.magnificPopup) 中存储了一个实例，它控制 DOM 中弹出窗口的行为。通过更改单个设置来更新后台点击行为实际上非常容易。

$.magnificPopup.instance.st.closeOnBgClick = false

在内部，MFP 使用 $.detach() 和 $.append() 来控制关闭按钮的存在。要删除它，我们可以通过调用复制它在 _close() 中的工作方式：

$.magnificPopup.instance.currTemplate.closeBtn.detach()

Re-adding 有点困难，因为库使用名为 _getCloseBtn() 的私有函数来生成元素。幸运的是，我们可以 re-append 从我们删除它的同一个地方。

$.magnificPopup.instance.content.append($.magnificPopup.instance.currTemplate.closeBtn)

来源：https://github.com/dimsemenov/Magnific-Popup/blob/c8f6b8549ebff2306c5f1179c9d112308185fe2c/dist/jquery.magnific-popup.js

用于测试的演示页面：https://dimsemenov.com/plugins/magnific-popup/

Magnific Popup：打开时如何修改 showCloseBtn 和 closeOnBgClick？

Magnific Popup: How to modify showCloseBtn and closeOnBgClick while open?

javascript

jquery

magnific-popup