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

Question

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

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

这是我的代码：

<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

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

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

由于您想要打开位于 html 中的 html，因此您应该将 type 设置为 inline。示例（带按钮）：

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

我没有测试过，但我希望它可以帮助。

干杯

Answer 2

您正在做的是在#popup-with-zoom-anim 上绑定一个点击事件，这就是它没有在加载时触发的原因。您必须调用 magnificpopup open 方法才能在加载时打开它。

试试这个：

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