页面加载时的放大弹出菜单

Magnific Popup on Page Load

本文关键字：菜单 放大 加载      更新时间：2023-09-26

我正在尝试在页面加载时自动显示放大弹出菜单。

我有它，所以当我点击一个按钮时它就可以工作(这减少了一些可能的错误(，但我仍然无法让它在加载时出现。我试过这个和这个，但似乎都不起作用。

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

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

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

在文档中，我发现了以下内容：

// 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((；

相关文章：