Question

我正在使用Magnific Popup插件在灯箱中显示图像。当我点击Chrome中的图像时，浏览器会滚动到顶部，之后菜单无法点击。

$('.img-item').magnificPopup({ 
    type: 'image',
    gallery:{
        enabled:true
    }   
});

Answer 1

Magnific有一个选项fixedContentPos。默认设置为“自动”，使其将内容修复到顶部。设置fixedContentPos: false应强制放大使用基于当前滚动的绝对位置。

Answer 2

好的伙计们，我想我找到了解决办法。

我删除了我的完整脚本fixedContentPos: false，在“打开”上将noscroll添加到body元素并在“close”上删除它很重要：

$('.open-link').magnificPopup({
  type: 'image',
  closeOnBgClick: true,
  fixedContentPos: false,
  callbacks: {
    open: function() {
      jQuery('body').addClass('noscroll');
    },
    close: function() {
      jQuery('body').removeClass('noscroll');
    }
  }
});

最后，为noscroll创建一个CSS规则：

body.noscroll {
  overflow-y: hidden!important;
}

fixedContentPos:false阻止对身体使用固定位置并使滚动条保持在同一位置。但是，它不会阻止滚动，用户仍然可以向上/向下滚动。使用overlow-y:hidden隐藏滚动条并禁用鼠标滚轮。

Answer 3

对我来说，这是delegate:'a'选项的问题。在它设置的任何地方，我都需要添加fixedContentPos: false，这对我来说就是诀窍。

Answer 4

您需要使用：preventDefault（）

JavaScript的：

function attach_magnific_popup(e){
e.preventDefault();
jQuery('a.open-popup-link').magnificPopup({
        type: 'inline',
        //fixedContentPos: true,
        //fixedBgPos: true
    });
}

HTML：

<a href="#pop-up-content"  class="open-popup-link" onclick="attach_magnific_popup(event);">Click here...!</a>

Answer 5

看起来将magnificPopup代码从$(document).ready()移动到$(window).load()就可以了。这是我的代码：

$(window).load(function() {
  $('.open-popup-link').magnificPopup({
    type:'inline',
    closeBtnInside: true,
    fixedContentPos: false,
    midClick: true
  });
});

Answer 6

听起来某处存在JS错误，或者您的图片被包装到<a href=""></a>标记中，并且会干扰默认行为。

Answer 7

好的，这是一个奇怪的事情。以下是我修复它的方法：

我从.magnificPopup({删除了onReady代码，而是将其移至某个功能。
然后我将 onlick 事件添加到触发弹出窗口的元素中。

我不知道为什么，但那确实有用。

以下是代码：

的JavaScript

function attach_magnific_popup(){
jQuery('a.open-popup-link').magnificPopup({
        type: 'inline',
        //fixedContentPos: true,
        //fixedBgPos: true
    });
}

HTML：

<a href="#pop-up-content"  class="open-popup-link" onclick="attach_magnific_popup();">Click here...!</a>


<div id="pop-up-content" class="white-popup mfp-hide" >
....Pop up content...
</div>

注意：我尝试使用 fixedBgPos，fixedContentPos，alignTop 属性，但没有工作。

Magnific Popup - 浏览器在图像点击时滚动到顶部

7 个答案: