javascript - 没有按钮点击的 MagnificPopup

Question

我使用 MagnificPopup 在使用 jQuery 加载内容后显示弹出窗口 get()方法。当 get()调用完成，我想显示下面的弹出窗口:

<div id="tagsearch-popup" class="panel panel-default mfp-hide">
    <div class="panel-heading">Tag Search</div>
    <div class="panel-body">
        <div class="col-xs-12 no-padding">
            Example
        </div>
    </div>
</div>

这是我正在使用的 jQuery。

$.get(url, function (data) {
   success: {
      $("#recalculation-guid").html(data);
      // Display popup now
   }
});

但是，当我查看 MagnificPopup 示例时，我只能找到将弹出窗口绑定(bind)到按钮的示例。我想以编程方式创建它。

如何使用 MagnificPopup 转换 <div>没有点击按钮就可以进入弹出窗口吗？

Answer 1

有一个名为 open 的方法:

$.magnificPopup.open({
  items: {
    src: 'someimage.jpg'
  },
  type: 'image'

  // You may add options here, they're exactly the same as for $.fn.magnificPopup call
  // Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
 //and also close, if you're into that ;)
$.magnificPopup.close(); 

所以在你的代码中:

$.get(url, function (data) {
   success: {
   $("#recalculation-guid").html(data);
   // Display popup now
   $.magnificPopup.open({...});
   }
});