我無法讓我的Magnific彈出窗口加載頁面加載

首先，我知道這個問題已經在本網站的其他地方討論過。我已經閱讀了所有內容，但無法讓我的代碼正常工作。我的JavaScript技能非常有限，所以如果有人能幫助我解決這個問題，那將會非常有用。我無法讓我的Magnific彈出窗口加載頁面加載

我得到了彈出窗口顯示動畫，它的效果很好。但我仍然需要點擊鏈接才能顯示彈出窗口。我想在加載頁面時加載彈出窗口。我已經看到了代碼，但我無法正常工作。

這是我的代碼：

<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/> 

    <div id="small-dialog" class="zoom-anim-dialog mfp-hide"> 
    -- some content --- 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.popup-with-zoom-anim').magnificPopup({ 
     type: 'inline', 

     fixedContentPos: true, 
     fixedBgPos: true, 

     overflowY: 'auto', 

     closeBtnInside: true, 
     preloader: false, 

     midClick: true, 
     removalDelay: 300, 
     mainClass: 'my-mfp-zoom-in' 
    }); 
    }); 
</script>

任何人誰可以告訴我，我需要如何改變這種代碼火在頁面加載彈出？

在此先感謝！

Senne

來源

2015-04-30 Senne Vandenputte

你在做什麼是你在#popup-with-zoom-anim這就是爲什麼它沒有負載觸發綁定click事件。您必須調用magnificpopup open方法打開它onload。

試試這個：如果您訪問的文檔

$(document).ready(function() { 
    $.magnificPopup.open({ 
     items:{ 
      src: '#small-dialog', 
      type: 'inline' 
     }, 
     fixedContentPos: true, 
     fixedBgPos: true, 
     overflowY: 'auto', 
     closeBtnInside: true, 
     preloader: false, 
     midClick: true, 
     removalDelay: 300, 
     mainClass: 'my-mfp-zoom-in' 
    }); 
});

來源

2015-04-30 08:24:56 DigitalDouble

嗨，感謝您的回答，它的工作原理！你也許知道我可以延遲幾秒鐘？ –

你可以嘗試在settimeout中添加它。 'setTimeout（function（）{/ *在這裏插入函數* /}，3000）;' – DigitalDouble

我明白了！非常感謝，你讓我的一天！ :-) –

http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing-popup 你可以看到你有一個開放的選項：

$.magnificPopup.open({ 
    items: { 
    src: 'some-image.jpg' 
    }, 
    type: 'image' 
});

既然你想要的是打開位於HTML在你的html中，你應該將type設置爲內聯。示例（帶按鈕）：

// From an element with ID #popup 
$('button').magnificPopup({ 
    items: { 
     src: '#popup', 
     type: 'inline' 
    } 
});

所以最後你應該有這樣的事情：

<div> 
<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/> 

    <div id="small-dialog" class="zoom-anim-dialog mfp-hide"> 
    -- some content --- 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $.magnificPopup.open({ 
     src: '#small-dialog', 
     type: 'inline' 
    }); 
}); 
</script>

我沒有測試過，但我希望它能幫助。

乾杯

來源

2015-04-30 08:25:41

謝謝我有我的解決方案！ –

我無法讓我的Magnific彈出窗口加載頁面加載

回答

相關問題