Question

首先，感谢伟大的“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'的问题！:)

Answer 1

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

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

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

Answer 2

我通过向trigger元素添加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 选项。希望它有所帮助！

Magnific Popup - 为iframe添加其他类

2 个答案: