아래처럼 레이어 팝업을 화면의 정 가운데 위치시키는 게 필요한 경우가 있다.
HTML
우선 이런 식으로 레이어를 준비한다. 보통은 body를 닫기 직전에 둔다.
<div class="js-layer layer hidden">
<!-- 내용은 알아서 -->
</div>
js-layer 클래스는 js 제어를 위한 클래스고, hidden 클래스는 감춰 두기 위한 것이다. js에서 레이어를 보이게 할 때 이 hidden 클래스를 제거해서 보이게 한다.
다음은 레이어를 열게 할 버튼용 html 태그다. 역시 js-open은 js 제어를 위한 클래스고, open-button 클래스는 스타일링을 위한 클래스다.
<button type="button" class="js-open open-button">Open Layer</button>
CSS
CSS가 핵심이다. 설명은 아래에 있다.
/* basic */
.layer {
position: fixed;
width: 40%;
left: 50%;
margin-left: -20%; /* half of width */
height: 300px;
top: 50%;
margin-top: -150px; /* half of height */
overflow: auto;
/* decoration */
border: 1px solid #000;
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
- 우선 포지션은
fixed로 한다. 그러면 화면을 스크롤 해도 레이어는 계속 화면 한 가운데 있게 된다. width,left,margin-left를 이용해서 좌측 위치를 가운데로 맞추는 기법이다.left: 50%를 주면 화면 좌측의 50% 위치에서 레이어가 시작된다. 이 때 음수 마진을 레이어 너비의 절반 만큼 주면 레이어 너비의 절반 만큼 레이어가 왼쪽으로 이동하면서 가운데 오게 되는 것이다.height,top,margin-top을 이용해서 상단 위치를 가운데로 맞추는 기법이다.top: 50%를 주면 화면 상단의 50% 위치에서 레이어가 시작된다. 이 때 음수 마진을 레이어 높이의 절반 만큼 주면 레이어 높이의 절반 만큼 레이어가 위로 이동하면서 가운데 오게 되는 것이다.- 레이어의 내용이 넘치면 스크롤이 생기도록
overflow: auto를 준다.
아래 코드는 화면이 좁을 때 레이어 너비를 좀더 넓히는 CSS 코드다.
@media (max-width: 600px) {
.layer {
width: 80%;
margin-left: -40%;
}
}
아래 코드는 처음에 레이어를 감춰 두기 위한 코드다.
.hidden {
display: none;
}
자바스크립트
.js-open 버튼을 클릭하면 레이어에서 hidden 클래스를 뗀다.
$('.js-open').click(function () {
var $layer = $('.js-layer');
$layer.removeClass('hidden');
});
이게 전부다.
접근성
스크린 리더 등 보조 기기 사용자들을 위해 팝업으로 초점을 옮겨 줘야 한다. 여기서 다룰 주제는 아니니 넘어간다. 해당 내용은 Using ARIA role=dialog to implement a modal dialog box 등을 참고하라.
데모
데모는 jQuery 3을 사용하므로 구형 브라우저에서 돌아가지 않는다.
댓글 남기기