4

首先，感谢伟大的“Magnific Popup”插件！我有一个初学者的问题。我正在使用一种iframe类型。我在 iframe 中展示了几种类型的网站，它们中的大多数都是响应式的，并且占据了 iframe 的所有宽度。但在某些情况下，当网站没有响应时，我想向 iframe 添加一些特定的类，我在其中设置宽度的绝对值。什么是最合适的方法？

$.magnificPopup.open({
  items: {              
    src: myUrl,          
    type: 'iframe',
    class: '.bad-site-class' // Is there something like 'class'?
   }
});

谢谢你，祝你秋天愉快！

（Yoo-hoo，这是第 100 个标记为“magnific popup”的问题！:)）

4

2 回答 2

10

您可以使用markupParse回调，例如：

callbacks: {
   markupParse: function(template, values, item) {
       template.find('iframe').addClass('bad-site-class');
   }
}

http://dimsemenov.com/plugins/magnific-popup/documentation.html#api

于 2013-10-30T10:24:36.213 回答
5

我通过向触发器元素添加一个 data-modal-class 并将这个类附加到mfp-wrap包装 div 来做了类似的事情。您需要在插件选项中添加此回调。

callbacks: {
  beforeOpen: function() {
      var $triggerEl = $(this.st.el),
          newClass = $triggerEl.data("modal-class");
          if (newClass) {
            this.st.mainClass = this.st.mainClass + ' ' + newClass;
          }
  }
}

然后将带有自定义类的数据属性添加到触发器元素：

<a href="#SOME-DIV" data-modal-class="mfp-custom-class">Open popup</a>

在模式打开之前，它会将您的数据属性类连接到mainClass选项。希望能帮助到你！

于 2014-11-10T15:08:13.450 回答