如何用Fancybox3创建三个自定义尺寸的独立iframe？

嘿，我来帮你搞定这个问题！要给每个Fancybox3的iframe设置专属尺寸，其实有几种简单又灵活的方法，我给你一一拆解：

Fancybox3本身支持通过data-width和data-height属性直接给单个iframe设置尺寸，你只需要在对应的<a>标签里加上这两个属性就行，不用修改全局CSS。这种方式最直接，每个链接独立配置：

<!-- 第一个iframe：宽800px，高600px -->
<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" data-width="800" data-height="600" href="javascript:;"> 网页1 </a>

<!-- 第二个iframe：宽1000px，高700px -->
<a data-fancybox data-type="iframe" data-src="你的第二个目标链接" data-width="1000" data-height="700" href="javascript:;"> 网页2 </a>

<!-- 第三个iframe：宽600px，高800px -->
<a data-fancybox data-type="iframe" data-src="你的第三个目标链接" data-width="600" data-height="800" href="javascript:;"> 网页3 </a>

如果需要给同一类iframe统一设置尺寸，或者想保留全局样式的同时覆盖特定iframe，可以给<a>标签加自定义类，再写对应的CSS规则：
首先修改HTML，给每个链接加专属类：

<a data-fancybox data-type="iframe" data-src="链接1" class="iframe-size-1" href="javascript:;"> 网页1 </a>
<a data-fancybox data-type="iframe" data-src="链接2" class="iframe-size-2" href="javascript:;"> 网页2 </a>
<a data-fancybox data-type="iframe" data-src="链接3" class="iframe-size-3" href="javascript:;"> 网页3 </a>

然后添加CSS，针对不同类名设置尺寸：

/* 全局基础样式（保留你原来的配置） */
.fancybox-slide--iframe .fancybox-content {
  max-width : 80%;
  max-height : 80%;
  margin: 0;
}

/* 第一个iframe的专属尺寸 */
.iframe-size-1 ~ .fancybox-container .fancybox-slide--iframe .fancybox-content {
  width: 800px;
  height: 600px;
}

/* 第二个iframe的专属尺寸 */
.iframe-size-2 ~ .fancybox-container .fancybox-slide--iframe .fancybox-content {
  width: 1000px;
  height: 700px;
}

/* 第三个iframe的专属尺寸 */
.iframe-size-3 ~ .fancybox-container .fancybox-slide--iframe .fancybox-content {
  width: 600px;
  height: 800px;
}

如果你的尺寸需要根据内容、屏幕尺寸或其他条件动态计算，可以用Fancybox的beforeShow回调函数来灵活控制：

// 先给所有iframe链接加上同一个分组名，方便统一处理
$('[data-fancybox="iframe-group"]').fancybox({
  type: 'iframe',
  beforeShow: function(instance, current) {
    // 根据当前链接的特征（比如src关键词）设置不同尺寸
    if (current.src.includes('jyEGGG')) {
      current.width = 800;
      current.height = 600;
    } else if (current.src.includes('你的第二个链接关键词')) {
      current.width = 1000;
      current.height = 700;
    } else {
      current.width = 600;
      current.height = 800;
    }
  }
});

记得把HTML里的data-fancybox属性改成统一的分组名，比如data-fancybox="iframe-group"。

内容的提问来源于stack exchange，提问作者Daniel Schmitt