fancybox 3 iframe에 추가 콘텐츠를 추가하는 방법은 무엇입니까?
아메드 엘 셰이크
예를 들어이 URL이 있습니다.
<a data-fancybox data-type="iframe" data-src="/webrtcv2/" href="javascript:;"><i class="fa fa-video-camera" aria-hidden="true"></i></a>
일반적으로 URL을 iframe으로 표시하지만 iframe 내부가 아닌 iframe 에이 추가 div 콘텐츠를 추가해야합니다.
<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;
}
데모-https: //jsfiddle.net/18hbr7oe/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
동적으로 추가 된 새 콘텐츠에 클래스를 추가하는 방법은 무엇입니까?
- 2
jQuery 또는 JavaScript를 사용하여 ckeditor에 콘텐츠를 추가하는 방법은 무엇입니까?
- 3
콘텐츠 위에서 페이드 인하는 중앙 div를 추가하는 방법은 무엇입니까?
- 4
닫는 태그 앞에 여러 div 안에 콘텐츠를 추가하는 방법은 무엇입니까?
- 5
자바 스크립트에서 PHP 루프에 콘텐츠를 추가하는 방법은 무엇입니까?
- 6
JavaScript에서 sap.m.Column에 콘텐츠를 추가하는 방법은 무엇입니까?
- 7
포함 후 헤더에 콘텐츠를 추가하는 방법은 무엇입니까?
- 8
Spring oauth2 액세스 토큰에 콘텐츠를 추가하는 방법은 무엇입니까?
- 9
CurlSharp의 문자열에 HTML 콘텐츠를 추가하는 방법은 무엇입니까?
- 10
덮어 쓰지 않고 로그 파일에 콘텐츠를 추가하는 방법은 무엇입니까?
- 11
선택한 div의 html 콘텐츠를 텍스트 영역에 추가하는 방법은 무엇입니까?
- 12
Python 3에서 HTML 태그 스타일의 콘텐츠를 가져 오는 방법은 무엇입니까?
- 13
추가 된 콘텐츠를 변경하는 방법은 무엇입니까?
- 14
iframe 안에 동적 콘텐츠를 추가하는 방법 ..?
- 15
TabitemConfig Gxt3에 SelectHandler를 추가하는 방법은 무엇입니까?
- 16
TYPO3 콘텐츠 요소 테이블에 레이아웃 스타일 옵션을 추가하는 방법은 무엇입니까?
- 17
다음 코드에서 콘텐츠를 추가하는 목적은 무엇입니까? ''
- 18
Jsoup을 사용하여 HTML 콘텐츠에 패딩을 추가하는 방법은 무엇입니까?
- 19
hybris가 제공하는 전자 상점에서 impex를 통해 새로운 사양 콘텐츠를 추가하는 방법은 무엇입니까?
- 20
GWT 쿼리를 사용하여 iframe의 콘텐츠를 가져 오는 방법은 무엇입니까?
- 21
레이어 안의 콘텐츠 앞뒤에 공백을 추가하는 방법은 무엇입니까?
- 22
봄 콘텐츠 협상에 csv MimeType을 추가하는 방법은 무엇입니까?
- 23
봄 콘텐츠 협상에 csv MimeType을 추가하는 방법은 무엇입니까?
- 24
콘텐츠를 자식 중 하나에 추가하는 사용자 지정보기를 작성하는 방법은 무엇입니까?
- 25
데비안 패키지 : 활성화하기 위해 bashrc에 콘텐츠를 추가해야하는 설치를 처리하는 방법은 무엇입니까?
- 26
ListView를 지우는 방법은 Android 앱의 이전 콘텐츠 뒤에 새 콘텐츠를 추가하는 것뿐입니까?
- 27
특정 단어 뒤에 콘텐츠를 추출하는 방법은 무엇입니까?
- 28
외부 웹 사이트에서 특정 div 콘텐츠를 추출하는 방법은 무엇입니까?
- 29
제 3 자 웹 사이트에서 쿠키 / 세션 콘텐츠를 검색하는 가장 좋은 방법은 무엇입니까?
몇 마디 만하겠습니다