頁面加載時的Magnific Popup

Question

我試圖使Magnific Popup在頁面加載時自動出現。

我有它，所以它的作品，當我點擊一個按鈕（這縮小了一些可能的錯誤），但我仍然無法讓它出現在加載。我試過this和this，但都沒有工作。

<script> 
    $('.open-popup-link').magnificPopup({ 
     type:'inline', 
     midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href. 
    }); 
    $.magnificPopup.open({ 
     type: 'inline' 
    }); 
</script> 

任何人都可以幫我理清這個嗎？理想情況下，它會自動打開並點擊按鈕。

附加信息

下面是該作品的按鈕，HTML/ERB：

<p><a href="#test-popup" class="open-popup-link btn btn-ghost hvr-grow" style="margin-top: 40px">Quick Man Check</a></p> 

和這裏的內容：

<div id="test-popup" class="white-popup mfp-hide"> 
    <div class=""> 
     <h1>Answer the following question to gain entry:</h1> 
     <% @random_partial = 'man_tests/test' + rand(0).round.to_s %> 
     <%= render partial: @random_partial %> 
    </div> <!-- hover-well --> 
</div> <!-- white-popup mfp-hide --> 

澄清： 彈出有表單數據的提交按鈕，這會導致問題它只出現過一次，但只有一次。

更新： 作爲建議，無論是這樣的：

$.magnificPopup.open({ 
    items: { 
     src: '#test-popup', 
     type: 'inline' 
    } 
}); 

而且這樣的：

$('.open-popup-link').magnificPopup('open'); 

讓它負載開，但隨後繼續這麼做廣告nauseum，絕不容忍索引頁面被查看。

Answer 1

$.magnificPopup.open({ 
    items: { 
     src: '#test-popup', 
     type: 'inline' 
    } 
}); 

如果您可以提供鏈接來檢查問題，那就足夠了。

嘗試以下

<script> 
function getPathFromUrl(url) { 
    return url.split(/[?#]/)[0]; 
} 

if(getPathFromUrl(document.referrer) != getPathFromUrl(document.URL){ 
$.magnificPopup.open({ 
     items: { 
      src: '#test-popup', 
      type: 'inline' 
     } 
    }); 
} 
</script> 

下面這段代碼是基於時間彈出的解決方案

var now, time, lastTimePopup, repeatAfter; 
    now = new Date(); 
    time = now.getTime(); 
    repeatAfter = 2 * 60 * 1000;//First number 2 is after number of minutes the popup should be showed. 

    if (localStorage.getItem('lastTimePopup') !== null) { 
     lastTimePopup = localStorage.getItem('lastTimePopup'); 
    } 

    if (((now - lastTimePopup) >= repeatAfter) || !lastTimePopup) { 
     $.magnificPopup.open({ 
      items: { src: '#test-popup' }, 
      type: 'inline' 
     }, 0); 

     localStorage.setItem('lastTimePopup', now.getTime()); 
    } 

Answer 2

在documentation我發現這一點：

// Open directly via API 
$.magnificPopup.open({ 
    items: { 
    src: '<div class="white-popup">Dynamically created popup</div>', // can be a HTML string, jQuery object, or CSS selector 
    type: 'inline' 
    } 
}); 

你應該在$（文件）把這個包。就緒（函數（）{...}）;

我創建了一個工作Plunker樣品給你：https://plnkr.co/edit/h1fmGbJg5cYONfwMQerF

另一種解決方案可能是添加一個隱藏的元素（如按鈕），通過JavaScript點擊：（「 thebutton」）$ [0]。點擊（）;