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

Question

我正在尝试让 Magnific Popup 在页面加载时自动出现。

我有它，所以当我单击一个按钮时它可以工作（这减少了一些可能的错误），但我仍然无法让它在加载时显示。我试过 this and ，但似乎都不起作用。

<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

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

你应该把它包装在 $(document).ready(function() {...});

我已经为您创建了一个有效的 Plunker 示例：https://plnkr.co/edit/h1fmGbJg5cYONfwMQerF

另一种解决方案可能是添加隐藏元素（例如按钮）并通过 Javascript 单击它：$('.thebutton')[0].click();

Answer 2

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

如果你能给link检查问题就足够了。

试试下面的代码

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

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

Magnific Popup on Page Load

javascript

magnific-popup