Magnific Popup - 为iframe添加其他类

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

然后将自定义类的数据属性添加到trigger元素:

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

在模态打开之前,它会将您的数据属性类连接到mainClass选项.希望能帮助到你!