모바일용 웹을 만들면서 팝업을 띄울 일이 있었습니다.
최종 퍼블리싱된 페이지에 내용이 많은 긴 페이지였고, 버튼이 중간 중간에 배치되어 있었습니다. 버튼을 누르게 되면 그 처리 결과에 대한 내용이 즉각적으로 레이어 팝업을 통해 내용을 표시해 주는 것이었습니다.
그런데 보통 레이어 팝업을 띄우면 (별도의 출력 좌표를 설정하지 않는 경우) 페이지 좌표를 기준으로 하기 때문에 긴 페이지의 스크롤을 내린 후, 레이어 팝업을 출력하면 아무런 반응이 없습니다. (왜냐하면 레이어 팝업이 눈에 보이지 않는 페이지 상단 영역에 표시되었기 때문입니다. 마우스를 위로 스크롤해서 페이지를 올라가 보면 보일 것입니다.)
하지만 간단한 jquery 스크립트만 추가하여 주면 현재 보여지는 화면 기준으로 항상 정 중앙에 레이어 팝업을 띄울 수 있습니다.
<script type="text/javascript">
...
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
return this;
}
...
showPopup = function() {
$("#popLayer").show();
$("#popLayer").center();
}
</script>
<body>
...
<a href="javascript:;" onclick="javascript:showPopup()">팝업띄우기</a>
...
</body>
<div id="popLayer" style="display:none;">
<div>팝업 레이어입니다.</div>
<div>
위에서 핵심 코드는 굵은 글씨로 작성한 부분입니다.
해당 코드를 작성하고, 어떤 div 오브젝트던 간에 .center() 만 호출하여 주면 화면 중앙에 팝업을 띄워줍니다.
그럼 조금더 자세히 살펴 볼까요?
jQuery 는 여기서 생성자 함수(Constructor Function) 정도로 보면 됩니다.
그리고 jQuery.fn 은 jQuery.prototype 과 동일합니다. fn 과 prototype 을 동일하게 보면 됩니다.
즉, jQuery.fn.center 는 여기서 사용되는 JQuery의 모든 객체에 대해 공통으로 적용되는 center 함수를 (재)정의하겠다는 의미입니다. (prototype 단어가 의미하는대로 어떠한 프로토타입(원형)을 정의하는 작업입니다.)
다시말하면 jQuery.fn.center = function () { ...} 는 jQuery의 객체가 center() 함수를 호출하면 다음 정의된 함수를 실행하라는 의미입니다.
함수 내의 this는 center() 함수를 호출한 jQuery객체를 가리킵니다.
this.css("position","absolute");
객체의 position 속성값을 absolute 로 설정합니다. (position 속성으로는 relative, fixed, static, inherit 까지 총 5가지가 있습니다.) absolute로 설정되었기 때문에 다른 객체의 영향을 받지 않고, 웹 페이지의 최상단을 기준으로 좌표를 설정할 수 있습니다.
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
객체의 top 위치 값을 설정합니다.
$(window).height() : 브라우저 뷰포트(viewport - 현재 보여지는 화면 영역)의 높이 값을 리턴합니다.
$(this).outerHeight() : 객체의 border와 padding 영역을 포함한 높이 값을 리턴합니다. 참고로 outerHeight() 함수에는 boolean 타입의 인자를 파라메터로 넘겨줄 수 있는데, true값을 넘겨주는 경우, border + padding + margin 영역을 포함한 객체의 높이 값을 리턴합니다.
$(window).scrollTop() : 브라우저에서 현재 페이지의 스크롤된 높이 값을 리턴합니다. (즉 현재 보여지는 화면 위쪽으로 보여지지 않는 영역의 길이라고 보면 됩니다.)
Math.max(0, x) : 두 수 중 큰 값을 반환합니다. 즉 top 위치가 0보다는 작아질 수 없게하는 처리입니다.
갹체 좌표는 absolute 로 설정된 상태! (페이지 최상단을 기준으로 좌표 계산)
스크롤되어 보여지지 않는 페이지 높이(Height) 영역과 현재 보여지는 화면(viewport) 높이에서 팝업 레이어 박스의 높이를 뺀 후, 2로 나눈값(화면 정 중앙에 나오게 하기 작업)을 더한 좌표에 레이어 좌측 상단이 오도록 배치시킵니다.
그림이 조금 엉성하기는 하지만^^, 각 항목이 어떤 것을 의미하는지에 대한 파악은 어렵지 않을 것입니다. 위의 이미지는 height 값에 대한 설명만 되어 있는데, width 값도 방향만 다르고, 크게 다르지 않습니다.
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft()) + "px");
객체의 left 위치 값을 설정하며, 위의 top 값 계산 방식과 동일합니다.
return this;
스타일 속성(top, left)값이 변경된 객체(this)를 되돌려 줍니다. 즉, 해당 객채의 좌표가 변경되었습니다.
'개발&컴퓨터 > JQuery & JS' 카테고리의 다른 글
| jqGrid 에서 레코드 수 (Row count) 정보 가져오기. (6) | 2014.12.16 |
|---|---|
| [Javascript] 숫자만 입력 받기 (4) | 2014.11.04 |
| [Javascript] 웹브라우저가 IE(인터넷 익스플로러)인지 확인하기 (11) | 2014.09.30 |
| Javascript 에서 replace정규식 그리고 replaceall과 같은 함수 구현하기. (3) | 2014.09.28 |
| JQuery를 사용하여 onclick 이벤트 속성 제거하기 (0) | 2014.09.27 |