Magnific Popup - 浏览器在图片顶部点击滚动

Question

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

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

Answer 1

听起来像有一个JS错误的地方或者你的形象被包裹成一个<a href=""></a>标签，并将其与默认行为干扰。

Answer 2

Magnific有一个选项fixedContentPos。默认情况下，它被设置为'auto'，导致它将内容修复到顶部。根据当前滚动，设置fixedContentPos: false应强制使用绝对位置。

Answer 3

好吧，这是一个奇怪的事情。这是我如何解决它：

1. 我从onReady取出.magnificPopup({代码，而是将其移动到一个功能。

2. 然后我添加了一个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属性，但没有奏效。

Answer 4

对我来说，这是delegate:'a'选项的问题。无论它在哪里设置，我需要添加fixedContentPos: false，这对我来说是个诀窍。

Answer 5

您需要使用：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 6

好的人，我想我找到了解决办法。

我剪掉我的完整剧本，但“fixedContentPos：假”，加入“noscroll”身体元素“打开”，并删除它“亲密”是很重要的：

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

最后，创建CSS规则noscroll为：

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

“fixedContentPos：假”阻止使用用于身体的固定位置，并保持在相同的位置上的滚动条。但是，它不会阻止滚动，用户仍然可以向上/向下滚动。使用overlow-y：隐藏滚动条并禁用鼠标滚轮。

Answer 7

看起来像是将magnificPopup代码从$(document).ready()移到$(window).load()为我做的。这里是我的代码：

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