Modal Window

이미지 모달 윈도우



마지막 블록에서는 IE6에 대한 대책을 세운 것입니다. if문을 사용해서 브라우저가 IE6의 경우에만 처리를 분기하도록 하여 position:fixed를 실행하도록 합니다. position:fixed는 스크롤 하더라도 위치가 변하지 않으므로 스크립트로 구현하는 것은 (1)웹 페이지 가운데의 어떤 위치를 표시하고 있는가, (2)브라우저가 어떤 사이즈로 열려있는가, 두 상황에 대해 스크롤이 발생할 때마다 확인합니다.

$(window).scroll(function() {...})는 브라우저상에서의 스크롤 처리(스크롤 이벤트)를 감지하고 {...} 안에 기술된 명령을 실행하는 구문입니다. 페이지 위에서부터 표시 위치는 $(document).scrollTop()으로, 브라우저의 표시 영역의 높이는 $(window).height()로 가져올 수 있습니다.

반투명 레이어(#grayLayer)는 CSS 핵으로 IE6에서만 position:absolute를 설정하였으므로 스크롤 이벤트가 발생할 때마다 페이지 위에서부터 위치를 가져와서 top 속성으로 설정하면 position:fixed와 같은 효과를 낼 수 있습니다.

자식 윈도우(#overLayer)도 마찬가지로 페이지 위에서부터 위치를 브라우저 표시 영역의 높이의 반을 더하는 것으로 position:fixed의 경우의 top:50%와 같은 위치에 자식 윈도우를 표시할 수 있습니다.

scrollTop() - 현재 스크롤 위치를 취득하는 명령. 셀렉터에 $(document)라고 지정하면 웹 페이지 가장 앞에서부터의 위치를 얻을 수 있습니다.
height() - 태그의 높이를 취득하는 명령. 셀렉터에 $(window)라고 지칭하면 브라우저가 표시되는 영역의 높이를 얻을 수 있습니다.




IE에서만 "setExpression"을 사용하자.

상기 샘플에서는 IE6에 대한 처리를 위해 $(window).scroll(function() {...})로 position:fixed를 구현하였습니다. 다만 스크롤 이벤트를 사용하는 방법은 스크롤 후에 좌표를 이동시키고 있기 때문에 깜박거림이 발생합니다.

이 부분을 해결하기 위해서 IE에서 제공하는 setExpression이라는 명령을 소개합니다. setExpression은 IE5-7에서만 이용 가능한 자바스크립트 명령으로 브라우저가 웹 페이지를 출력하는 타이밍에서 지정한 Javascript를 실행합니다.

예를 들어 아래와 같이 기술하면 $(document).scrollTop+'px'의 결과를 #grayLayer의 top 속성에 설정할 수 있습니다. get(0)은 jQuery로 가져온 태그에 JavaScript로 기술된 처리를 적용하는 명령입니다.

							$("#grayLayer").get(0).style.setExpression("top", "$(document).scrollTop()+'px'");
						

IE6 대책 부분을 다음과 같이 변경함으로써 setExpression을 사용하여 position:fixed를 구현할 수 있습니다.

							if ($.browser.msie && $.browser.version<7) {
								$(window).scroll(function(){
									$("#grayLayer").get(0).style.setExpression("top",
									" $(document).scrollTop()+'px' ");
									$("#overLayer").get(0).style.setExpression("top",
									"( $(document).scrollTop()+$(window).height()/2)+'px' ");
								});
							}
						

그러나 이렇게 한다고 해서 깜박거림이 완전히 사라지는 것은 아닙니다. 하지만 스크롤 이벤트를 사용한 방법과 비교했을 때 좀 더 부드럽게 표시됩니다.

텍스트 모달 윈도우