我无法在页面加载时加载 Magnific 弹出窗口

Question

首先，我知道这个问题已经在本网站的其他地方讨论过了。我已经阅读了所有内容，但无法让我的代码正常工作。我的 javascript 技能相当有限，所以如果有人可以帮助我，那就太好了。

我让弹出窗口显示动画，效果很好。但我仍然必须单击 link 才能显示弹出窗口。我想在页面加载时加载弹出窗口。我看过这方面的代码，但我无法让它正常工作。

这是我的代码：

<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>

  <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
     -- some content ---
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('.popup-with-zoom-anim').magnificPopup({
      type: 'inline',

      fixedContentPos: true,
      fixedBgPos: true,

      overflowY: 'auto',

      closeBtnInside: true,
      preloader: false,

      midClick: true,
      removalDelay: 300,
      mainClass: 'my-mfp-zoom-in'
    });
  });
</script>

谁能告诉我需要如何更改此代码才能在页面加载时触发弹出窗口？

提前致谢！

塞纳

Answer 1

您正在做的是在 #popup-with-zoom-anim 上绑定一个点击事件，这就是为什么它不会在加载时触发。您必须调用 magnificpopup open 方法才能打开它 onload.

试试这个：

$(document).ready(function() {
    $.magnificPopup.open({
        items:{
            src: '#small-dialog',
            type: 'inline'
        },
        fixedContentPos: true,
        fixedBgPos: true,
        overflowY: 'auto',
        closeBtnInside: true,
        preloader: false,
        midClick: true,
        removalDelay: 300,
        mainClass: 'my-mfp-zoom-in'
    });
});

Answer 2

如果您访问文档 http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing-popup 你可以看到你有一个打开的选项：

$.magnificPopup.open({
  items: {
    src: 'some-image.jpg'
  },
  type: 'image'
});

由于您想要打开位于 html 中的 html，您应该将类型设置为内联。示例（带按钮）：

// From an element with ID #popup
$('button').magnificPopup({
  items: {
      src: '#popup',
      type: 'inline'
  }
});

所以最后你应该有这样的东西：

<div>
<a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/>

  <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
     -- some content ---
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
  $.magnificPopup.open({
      src: '#small-dialog',
      type: 'inline'
    });
});
</script>

我还没有测试过，但我希望它能有所帮助。

干杯

我无法在页面加载时加载 Magnific 弹出窗口

I can't get my Magnific popup to load on page load

html

javascript

popup

pageload

magnific-popup