모달 창을 브라우저 창 중앙에 배치하려고합니다 (Firefox, Chrome 및 Opera에서 테스트 중입니다).
이 링크 를 클릭하고 중앙에있는 이미지를 한 번 더 클릭 하면 테스트 할 수 있습니다 . 모달 창이 나타나야합니다 (비어 있으므로이 모달 창에서 구성 요소를 제거했습니다).
모달 창을 브라우저 창 중앙에 배치하기 위해 다음을 수행했습니다.
// Width and Height of WebGL window : 90% of browser window width
var mainWidth = 0.9*$(window).width();
// Height deduced from starting image : 490/900 is the ratio of starting image, so I keep proportions.
// image
var mainHeight = mainWidth*(490/900);
그리고 이후 :
// Padding and Margin
var paddingLeft = parseInt($('.popup_block').css('paddingLeft'));
var paddingTop = parseInt($('.popup_block').css('paddingTop'));
var borderLeft = parseInt($('.popup_block').css('borderLeftWidth'));
var borderTop = parseInt($('.popup_block').css('borderTopWidth'));
// Compute x and y limits for pop up
var xPop = ($(window).width() - (mainWidth + paddingLeft + borderLeft))/2;
var yPop = ($(window).height() - (mainHeight + paddingTop + borderTop))/2;
마지막으로 다음과 같이 모달 창을 표시합니다.
// Make appear pop-up and add closing button
$('#'+popID).fadeIn().css({'width': mainWidth, 'height': mainHeight, 'top': yPop, 'left': xPop}).prepend('<a href="#" class="close"><img src="./close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
// Display background
$('body').append('<div id="fade"></div>');
// Working only for background
$('#fade').css({'filter' : 'contrast(0.8)'}).fadeIn();
와 모달 창.'#'+popIDjQuery id
오른쪽의 약간의 이동에 대한 도움 이 필요합니다 (빈 공간은 왼쪽보다 오른쪽이 더 큽니다). 고려해야 할 다른 매개 변수 (패딩, 여백, 테두리 ...)를 잊었습니까?
모든 도움을 환영합니다.
.popup_block전체 패딩과 테두리가 사방에 있지만 왼쪽 패딩 / 테두리 및 상단 패딩 / 테두리 값만 잡고이를 사용하여 top및 left속성을 사용하여 요소의 위치를 절대적으로 지정 하므로 요소가 실제로 오른쪽에 약간 넓게 표시됩니다. 요소를 배치 할 때 오른쪽 / 아래쪽 패딩 / 테두리가 고려되지 않았기 때문에 아래쪽 측면.
패딩 / 테두리가 모든면에서 균일하므로 paddingLeft, borderLeft, paddingTop, borderTop값을 두 배로 늘릴 수 있습니다 .
var xPop = ($(window).width() - (mainWidth + (paddingLeft * 2) + (borderLeft * 2)))/2;
var yPop = ($(window).height() - (mainHeight + (paddingTop * 2) + (borderTop * 2)))/2;
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다