无需单击按钮的 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 示例时，我只能找到将弹出窗口绑定到按钮的示例。我想以编程方式创建它。

如何使用 MagnificPopup 将上面的 <div>s 转换为弹出窗口而无需单击按钮？

Answer 1

这个例子可能对你有帮助：

$("a").click(function() {
    alert("clicked");
    // your instantiation
});
$("a").click();

您需要做的是触发实例化 MagnificPopup 的点击。

Answer 2

有一个方法叫做打开：

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

无需单击按钮的 MagnificPopup

MagnificPopup without button click

javascript

jquery

popup

magnific-popup