Magnific Popup - 向 iframe 添加额外的类答案

【问题标题】：Magnific Popup - add additional class to iframeMagnific Popup - 向 iframe 添加额外的类
【发布时间】：2013-10-30 08:22:12
【问题描述】：

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

【问题讨论】：

标签： javascript jquery iframe magnific-popup classname

【解决方案1】：

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

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

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

【讨论】：

很好，但是它在 mfp-content' 内容上工作，我如何在 mfp-content 本身上应用一个类？

【解决方案2】：

我通过向触发器元素添加一个 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 选项。希望对您有所帮助！

【讨论】：