라이트 박스/div 팝업을 iframe의 뷰포트 중심에 배치하려면 어떻게해야합니까?

Question

라이트 박스/div 팝업을 배치하여 iframe의 뷰포트 중심에 오도록 배치하는 방법은 무엇입니까?

iframe은 다른 도메인의 HTML에 삽입되어 있습니다.

Answer 1

아래의 모든 변경 사항은 iframe에로드되는 페이지를 참조합니다.

먼저 div를 문서 본문의 맨 아래에 추가하십시오. 당신이 모달을 사용하고자 할 때

var body = $('body')[0]; 
$(body).append("<div id='modal' style='position:absolute;display:none;'></div>"); 

그런 다음, (함수 내에서) 다음 코드를 실행합니다 :

// to position it, do the following 
var body = $('body')[0]; 

// get the position and size info on the iframe 
var height = $(body).height(); 
var width = $(body).width(); 

// get the size information on the modal div 
var divHeight = $('#modal').height(); 
var divWidth = $('#modal').width(); 

// put it together to get the proper position 
var top = (height/2)-(divHeight/2); 
var left = (width/2)-(divWidth/2); 

// set it and we're done, hiya! 
$('#modal').css('top', top); 
$('#modal').css('left', left); 

// show the div 
$('#modal').css('display', 'block'); 

주 두 가지

1. 당신은 모달 DIV를 추가해야 body 요소에 더 쉽게 생명을 불어 넣으십시오.
2. 모달은 절대 위치를 가져야합니다 - 예를 들어 인라인으로 넣으십시오

가 부여하는 샷 :