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>

任何能告诉我如何更改此代码以在页面加载时触发弹出窗口的人？

提前致谢！

Senne

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

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

2 个答案: