如何使用beforeClose回调取消打开弹出窗口？ ＃荡气回肠 - 弹出

Question

我使用带有beforeClose回调的MagnificPopup，并且我想根据条件取消它的开放。我怎么能这样做？

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

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

由于

Answer 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，则弹出窗口将无法打开。

Answer 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 ......

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