<div id="chapter_select"></div> 레이어창을 브라우져 화면가운데 띄우는 자바스크립트 예제입니다. jQuery로 작성하였습니다.
여기서 주의할 것은 document.body.scrollTop 와 document.body.scrollLeft 입니다. 화면에 스크롤이 생겨서 스크롤 위치가 변경될 경우에는 스크롤 값도 레이어 위치에 영향을 주므로 해당 값도 확인해서 레이어 위치값에 반영합니다.
function fnOpenChapter() {
var obj = $('#chapter_select');
var iHeight = (document.body.clientHeight / 2) - obj.height() / 2 + document.body.scrollTop;
var iWidth = (document.body.clientWidth / 2) - obj.width() / 2 + document.body.scrollLeft;
obj.css({
position: 'absolute'
, display:'block'
, top: iHeight
, left: iWidth
});
}
여기서 주의할 것은 document.body.scrollTop 와 document.body.scrollLeft 입니다. 화면에 스크롤이 생겨서 스크롤 위치가 변경될 경우에는 스크롤 값도 레이어 위치에 영향을 주므로 해당 값도 확인해서 레이어 위치값에 반영합니다.
'JAVASCRIPT' 카테고리의 다른 글
AJAX로 Form데이터 전송 (Post/Get) (0) | 2012.08.17 |
---|---|
jQuery 레이어 팝업(modal window) 띄울 때 전체를 덮는 반투명 검은 막(black mask) 만들기 (0) | 2012.01.06 |
브라우저 크기에 따른 이미지 자동 크기조절 (0) | 2011.09.01 |
자바스크립트 타이머 (0) | 2011.07.13 |
jQuery 페이지내 Anchor로 이동 (0) | 2011.05.04 |