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

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

你应该将它包装在$（document）.ready（function（）{...}）;

中

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

另一个解决方案可能是添加隐藏元素（例如按钮）并通过Javascript点击它：$（＆＃39; .thebutton＆＃39;）[0] .click（）;

页面加载上的Magnific Popup

2 个答案: