精彩弹出窗口 - 向 iframe 添加其他类

Magnific Popup - add additional class to iframe

本文关键字：iframe 添加 其他 窗口 精彩      更新时间：2023-09-26

首先，感谢伟大的"华丽弹出窗口"插件！我有一个初学者的问题。我使用的是iframe类型。我在 iframe 中展示了几种类型的网站，其中大多数都是响应式的，并且占用了 iframe 的所有宽度。但是在某些情况下，当一个网站没有响应时，我想添加一些特定的类，其中我设置了宽度的绝对值，到iframe。什么是最正确的方法？

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

谢谢你，祝你秋天愉快！

（呜呜呜，这是第100个问题，标记为"华丽的弹出窗口"！ :) ）

您可以使用

markupParse回调，例如：

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

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

我做了类似的事情，将一个数据模态类添加到触发器元素并将这个类附加到 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 选项。希望对您有所帮助！

相关文章：