jquery - 如何在fancybox 3 iframe 中添加额外内容?
问题描述
例如我有这个网址
<a data-fancybox data-type="iframe" data-src="/webrtcv2/" href="javascript:;"><i class="fa fa-video-camera" aria-hidden="true"></i></a>
它通常只显示 iframe 的 url 但我需要将这个额外的 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
}
})
});
解决方案
最简单的解决方案是使用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;
}
推荐阅读
- c++ - 不同类的虚函数共享相同(无效?)内存地址
- selenium - 有没有办法使用硒比较两个文本文件的内容?
- javascript - 循环遍历 json 数组对象
- validation - Vuelidate,我可以通过 mixin 继承自定义方法吗?
- drupal - 在 drupal 8 块中显示 html 表
- azure - 在 azure 中发布为应用服务后,使用 DinkToPDF 进行 PDF 转换时无法加载外部库“libwkhtmltox.dll”
- oracle - Oracle 循环规则 4809
- r - 是否可以在 mlogit 模型中引入替代特定变量和单个特定变量之间的交互项
- c++ - boost::lexical_cast 错误输出
- c# - 如何拆分字符串,较长的分隔符优于较短的分隔符?