如何在fancybox 3 iframe 中添加额外内容？

Posted 2023-05-09

【中文标题】如何在fancybox 3 iframe 中添加额外内容？

【英文标题】：how to add extra content in fancybox 3 iframe?

【发布时间】：2020-03-11 23:18:12

【问题描述】：

例如我有这个网址

<a data-fancybox data-type="iframe" data-src="/webrtcv2/" href="javascript:;"><i class="fa fa-video-camera" aria-hidden="true"></i></a>

它通常只显示网址的 iframe，但 我需要将这个额外的 div 内容添加到 iframe 之外而不是 iframe 内

<div id="video-content" class="video-link" >
<a id="iframelink" class="link-id-videochat" href="">Send invitation</a>
</div>

这是我的 fancybox 3 代码

$(document).ready(function()

$('[data-fancybox="iframe"]').fancybox(
    toolbar  : false,
    smallBtn : true,
    iframe : 
        preload : true
    
)
);

最终的结果会是这样的

【参考方案1】：

最简单的解决方案是使用afterLoad 回调将表单克隆并附加到内容区域内，例如：

JS

$("#test").fancybox(
  afterLoad : function(instance, current) 
    current.$content.append( $('#video-content').clone(true).show());
  
)

CSS

.fancybox-slide--iframe .fancybox-content 
  max-width: 500px;
  max-height: 200px;


#video-content 
  position: absolute;
  top: calc(100% + 20px);
  background: #fff;
  left: 0;
  right: 0;
  padding: 5px;
  text-align: center;

演示 - https://jsfiddle.net/18hbr7oe/