브라우저 중앙 위치에서 팝업 띄우기

레이어창을 브라우저 화면 가운데 띄우기

자바스크립트/jQuery 2009/11/06 10:33

<div id="chapter_select"></div> 레이어창을 브라우져 화면가운데 띄우는 자바스크립트 예제입니다. jQuery로 작성하였습니다.

01.function fnOpenChapter() {

02.var obj = $('#chapter_select');

03.var iHeight = (document.body.clientHeight / 2) - obj.height() / 2 + document.body.scrollTop;

04.var iWidth = (document.body.clientWidth / 2) - obj.width() / 2 + document.body.scrollLeft;

05. 

06.obj.css({

07.position: 'absolute'

08., display:'block'

09., top: iHeight

10., left: iWidth

11.});

12.}

여기서 주의할 것은 document.body.scrollTop 와 document.body.scrollLeft 입니다. 화면에 스크롤이 생겨서 스크롤 위치가 변경될 경우에는 스크롤 값도 레이어 위치에 영향을 주므로 해당 값도 확인해서 레이어 위치값에 반영합니다.

출처 - http://thinkweb.tistory.com/15

===================================================================================

offsetHeight offsetWidth 값은 그 객체를 포함하고 있는 상위객체의 레이아웃 또는 좌표와 관련된 높이와 폭의 값입니다.

이와 관련하여 clientHeight 과 clientWidth 값이 있습니다. 이는 실제 웹페이지에 접속한 사용자가 가시적으로 보는 높이와 폭의 값입니다.

이에 대한 비교자료를 링크걸어 놓을테니 이를 통해 두개의 차이를 확인 하시기 바랍니다.

clientHeight	스크롤바를 포함하는 요소의 높이를 반환
	object.clientHieght
clientWidth	스크롤바를 포함하는 요소의 폭을 반환
	object.clientWidth
scrollHeight	스크롤바를 움직이지 않고 보여지는 요소의 전체 높이
	object.scrollHeight
scrollLeft	요소의 왼쪽 스크롤 된 폭을 반환
	object.scrollLeft
scrollTop	요소의 위쪽 스크롤 된 높이를 반환
	object.scrollTop
scrollWidth	스크롤바를 움직이지 않고 보여지는 요소의 전체 폭
	object.scrollWidth

 

출처 - http://pengs.pe.kr/29

===================================================================================

1. element.offsetWidth, element.offsetHeight

   - element.offsetWidth와 element.offsetHeight는 W3C 권고안이 아님. (MSIE's DHTML Object Model)

   - element.offsetWidth : element의 border, padding, css width를 포함한 폭

      * 즉 화면을 봤을 때 보여지는 엘리먼트의 폭

   - element.offsetHeight : element의 border, padding, css height를 포함한 높이

      * 즉 화면을 봤을 때 보여지는 엘리먼트의 높이

2. element.clientWidth, element.clientHeight

   - W3C 표준 아님 (MSIE's DHTML Object Model)

   - element.clientWidth : element의 border를 뺀 안쪽 폭 (padding은 포함하지만 수평스크롤바는 포함하지 않는다.)

      * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 폭

   - element.clientHeight : element의 border를 뺀 안쪽 높이 (padding은 포함하지만 수직스크롤바는 포함하지 않는다.)

      * 즉 화면을 봤을 때 테두리를 뺀 엘리먼트의 높이

3. element.scrollWidth, element.scrollHeight

   - W3C 권고안이 아님

   - element.scrollWidth : 엘리먼트의 스크롤 폭

   - element.scrollHeight : 엘리먼트의 스크롤 높이

참고사항

출처 - http://j79sw.tistory.com/438