레이어창을 브라우저 화면 가운데 띄우기
자바스크립트/jQuery 2009. 11. 6. 10:33<div id="chapter_select"></div> 레이어창을 브라우져 화면가운데 띄우는 자바스크립트 예제입니다. jQuery로 작성하였습니다.
여기서 주의할 것은 document.body.scrollTop 와 document.body.scrollLeft 입니다. 화면에 스크롤이 생겨서 스크롤 위치가 변경될 경우에는 스크롤 값도 레이어 위치에 영향을 주므로 해당 값도 확인해서 레이어 위치값에 반영합니다.
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 입니다. 화면에 스크롤이 생겨서 스크롤 위치가 변경될 경우에는 스크롤 값도 레이어 위치에 영향을 주므로 해당 값도 확인해서 레이어 위치값에 반영합니다.