레이어 팝업 박스를 화면 정 가운데 위치시키기

아래처럼 레이어 팝업을 화면의 정 가운데 위치시키는 게 필요한 경우가 있다.

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을 사용하므로 구형 브라우저에서 돌아가지 않는다.