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

Разъяснение: Всплывающее имеет кнопка отправки данных формы, что вызывает проблемы с ним появляется один раз, но только один раз.

Update: Как было предложено, как это:

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

И это:

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

сделать его открытым на нагрузке, но затем продолжает делать это объявление до тошноты, никогда не позволяя страницу индекса для просмотра.

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

Вы должны обернуть это в $ (документ) .ready (функция() {...});

Я создал рабочий образец Plunker для вас: https://plnkr.co/edit/h1fmGbJg5cYONfwMQerF

Другим решением может быть добавить скрытый элемент (например, кнопки) и нажмите на него с помощью Javascript: («thebutton») $ [0]. нажмите();