如何使用 beforeClose 回调取消打开弹出窗口？ #magnific-popup答案

【问题标题】：How to cancel opening popup with beforeClose callback ? #magnific-popup如何使用 beforeClose 回调取消打开弹出窗口？ #magnific-popup
【发布时间】：2014-04-02 13:59:19
【问题描述】：

我正在使用带有 beforeClose 回调的 MagnificPopup，我想根据条件取消它的打开。我该怎么做？

我尝试了返回 false 或 $.magnificPopup.close();，但它仍然打开...

我确定有一个基本的解决方案！

谢谢

【问题讨论】：

请提供小提琴或其他独立示例。
我尝试了 eventHandler 的解决方案，但它不起作用。所以我创建了一个 JSFiddle 页面：link 向您展示

标签： javascript magnific-popup

【解决方案1】：

这有点棘手，但你可以通过在初始化时直接打开弹出窗口来做到：

var popupDefaults = {
    type: 'inline',
    fixedContentPos: false,
    fixedBgPos: true,
    overflowY: 'auto',
    closeBtnInside: true,
}

$('.open-popup-link').on("click", function(){
    var condition = false;
    if(!condition){
      $(this).magnificPopup(popupDefaults).magnificPopup('open');
    }
});

fiddle

如果将条件更改为true，弹窗将不会打开。

【讨论】：

如果你的条件是基于window.width，你可以使用disableOn:dimsemenov.com/plugins/magnific-popup/…

【解决方案2】：

如果您的条件为真，您可以做的是覆盖创建弹出窗口的 javascript 函数。喜欢：

var originalOpen = window.open;
if (condition) {
    //prevent open new window
    window.open = function(){return null;};
}

// after window open attempt
window.open = originalOpen

您可以使用警报和任何类型的消息框来做到这一点。

另一种方法是修改 magnificPopup...

【讨论】：

【解决方案3】：

使用disableOn

disableOn: function(){
    if ($(window).width() <= 768){
        return false;
    }
    return true;
}

（可选）：这不会停止触发弹出窗口的 DOM 元素的默认行为。

如果您使用的是在弹出窗口中加载 Youtube 视频的锚标记：

disableOn 将阻止弹出窗口打开
浏览器会跟随锚标签的href的URL！

要阻止这种情况发生，请在 DOM 元素的点击处理程序上添加额外检查：

// Stop an anchor tag's default behavior
// Otherwise if it's a Youtube video, clicking this DOM element will land users on Youtube
$("a.my-popup").on("click", function(){
    if ($(window).width() <= 768){
        return false;
    }
});

【讨论】：