javascript - 页面加载时的华丽弹出窗口

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

让它在加载时打开，但它会继续这样做令人作呕，永远不允许查看索引页面。

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