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