센터 플러그인을 사용하여 뷰포트에 jQuery 중심 요소

현재 div 요소를 중앙에 배치하기 위해 jQuery 센터 플러그인을 사용하고 있으며 현재까지는 포함하는 상위 컨테이너로 센터를 확장하는 데까지 확장됩니다. 내가하고 싶은 것은 현재 브라우저 뷰포트 센터에 센터를 배치하는 것입니다. 어떻게 할 수 있습니까?센터 플러그인을 사용하여 뷰포트에 jQuery 중심 요소

내 설정을 클릭하면 간단한 링크입니다. div는 현재 브라우저의 뷰포트 센터 중앙에 모달처럼 나타납니다.

출처

2011-03-12 Anonymous

당신이 사용하는 플러그인을 연결할 수 있습니다 내가 대신 display:table 및 display:table-cell와 DIV의를 사용합니다. 다른 방법으로는 http://www.ericmmartin.com/projects/simplemodal/에서 볼 수 있습니다. 아마도 원하는대로 할 수 있습니다. – Akarun

는 어떤 플러그인이 필요하지 않습니다.

$('#yourElement').css('display', 'inline-block').wrap('<table style="position:fixed;top:0;left:0;height:100%;width:100%;border-spacing:0;border-collapse:collapse"><tr><td style="vertical-align:middle;text-align:center;padding:0"></td></tr></table>');

라이브 데모 :이 트릭 않습니다http://jsfiddle.net/simevidas/EnrLn/1/

같은 일을하지만, TABLE 요소없이.

라이브 데모 :http://jsfiddle.net/simevidas/EnrLn/2/

출처

2011-03-12 14:04:50

이것은 흥미 롭지 만 테이블이어야합니다? div로 할 수 없습니까? –

@Rick 답변을 업데이트했습니다. –

정말 훌륭합니다. 도와 줘서 고마워. 오, 한가지 더.이게 팝업인데, 창문을 어둡게하고 팝업 불투명 만 할 수있는 방법이 있니? –

사용

jQuery("#element_id").css('top', parseInt((jQuery(window).height()/2) + jQuery(document).scrollTop() - jQuery("#element_id").height())); 
jQuery("#element_id").css('left', parseInt((jQuery(document).width()/2) + jQuery(document).scrollLeft() - jQuery("#element_id").width()));

출처

2011-03-12 13:33:45 CoolEsh

이것은 세로 센터에서 작동하는 것처럼 보이지만 가로 센터는 왼쪽에서 벗어났습니다 ... 심지어 outerWidth를 사용하도록 코드를 변경했지만 도움이되지 않았습니다. –

내 머리 꼭대기에서'.width()'와'.height()'대신'.outerWidth()'와'.outerHeight()'를 사용해야 할 수도 있습니다. –

센터 플러그인을 사용하여 뷰포트에 jQuery 중심 요소

답변

관련 문제