Magnific Popup beim Laden der Seite

Question

Ich versuche, eine Magnific Popup automatisch beim Laden der Seite erscheinen.

Ich habe es so, es funktioniert, wenn ich auf eine Schaltfläche klicke (was einige mögliche Fehler eingrenzt), aber ich kann es immer noch nicht zum Laden erscheinen. Ich habe versucht this und this, aber keiner scheint zu arbeiten.

<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> 

Kann mir jemand helfen, dies zu klären? Im Idealfall würde es automatisch geöffnet und wenn die Schaltfläche geklickt wurde.

ZUSÄTZLICHE INFORMATIONEN

Hier ist der html/erb für die Schaltfläche, die funktioniert:

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

Und hier ist der Inhalt:

<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 --> 

Klarstellung: Das Popup hat eine Übergabeschaltfläche für Formulardaten, die Probleme verursacht damit erscheint es einmal aber nur einmal.

Update: Wie vorgeschlagen, beide diese:

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

Und:

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

Machen Sie es sich auf Last offen, aber es geht dann tut so bis zum Überdruss, nie erlaubt Indexseite, die angezeigt werden soll.

Answer 1

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

Wenn Sie Link geben können, um das Problem zu überprüfen, wird es gut genug sein.

diesen Code Versuchen unter

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

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

Below-Lösung auf Basis Popup für Zeit

ist,

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

Im documentation fand ich dies:

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

Sie sollten diese wickeln in einem $ (document) .ready (function() {...});

Ich habe eine Arbeits Plunker Probe für Sie erstellt: https://plnkr.co/edit/h1fmGbJg5cYONfwMQerF

Eine andere Lösung könnte ein verstecktes Element hinzuzufügen (zB eine Schaltfläche) und klicken Sie via Javascript: ('thebutton') $ [0]. klicken();