如何取消打开弹出窗口之前关闭回调?#magnific 弹出窗口

How to cancel opening popup with beforeClose callback ? #magnific-popup

本文关键字：窗口 回调 #magnific 何取消 取消      更新时间：2023-09-26

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

我尝试了退货false或$.magnificPopup.close();但它仍然打开...

我相信有一个基本的解决方案！

谢谢

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

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

小提琴

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

如果你的条件为真，你可以做的是覆盖创建弹出窗口的 JavaScript 函数。 比如：

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

您可以使用警报和任何类型的消息框来执行此操作。

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

使用 disableOn

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

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

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

  • 禁用将阻止弹出窗口打开

  • 浏览器将遵循锚标签 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;
    }
});
相关文章：