모달 팝업 만들기, dialog 태그로 ESC 닫기와 배경 클릭 닫기까지 처리하는 법
모달 팝업은 이제 div를 겹겹이 쌓지 않고 HTML의 <dialog> 태그와 showModal()만으로 만들 수 있습니다.
ESC 키로 닫기, 다른 요소 위로 띄우기, 뒤쪽 화면 클릭 막기가 기본으로 들어 있어서, 직접 짜던 코드의 절반 이상이 필요 없어집니다.
💡 기존 div 팝업은 뭐가 문제였나요?
유지보수 의뢰로 들어오는 사이트를 열어 보면 팝업이 헤더 밑에 깔리거나, 팝업이 떠 있는데도 Tab 키를 누르면 뒤쪽 메뉴로 초점이 넘어가는 경우가 흔합니다. z-index 숫자를 계속 올리고, 키보드 처리를 따로 붙이다 보니 생기는 문제입니다. showModal()로 연 dialog는 브라우저가 맨 위 층(top layer)에 따로 그려 주고, 뒤쪽 화면은 클릭도 초점 이동도 되지 않게 막아 줍니다.
1. 기본 구조: 여는 버튼과 dialog
dialog는 처음에는 숨겨져 있다가 showModal()을 부르면 뜹니다. 안쪽에 method="dialog"인 form을 두면 그 안의 버튼을 누르는 것만으로 닫히기 때문에, 닫기 버튼에는 따로 스크립트를 달 필요가 없습니다.
<button type="button" id="openNotice">공지 보기</button>
<dialog id="notice">
<h2>연말 배송 안내</h2>
<p>연말 기간 주문은 순차 발송됩니다.</p>
<form method="dialog">
<button>닫기</button>
</form>
</dialog>
// 열기
const notice = document.getElementById('notice');
document.getElementById('openNotice')
.addEventListener('click', () => notice.showModal());
여기까지만 해도 ESC 키를 누르면 닫히고, 열리는 순간 초점이 팝업 안으로 들어가며, 닫히면 원래 누른 버튼으로 초점이 돌아옵니다. show()로 열면 모달이 아닌 일반 창이 되어 이런 처리가 빠지니, 팝업 용도라면 꼭 showModal()을 쓰세요.
2. 배경 어둡게, 배경 클릭으로 닫기
뒤쪽 어두운 막은 ::backdrop으로 꾸밉니다. 배경을 눌러 닫는 기능은 기본으로 들어 있지 않아서 몇 줄을 더해야 합니다. 배경을 누르면 클릭 대상이 dialog 자신으로 잡히는 점을 이용하는데, 이때 dialog의 padding을 0으로 두고 안쪽 여백은 내부 div에 주어야 팝업 가장자리를 눌렀을 때 닫히는 일이 없습니다.
dialog { padding: 0; border: 0; border-radius: 12px;
max-width: min(90vw, 480px); }
dialog > .inner { padding: 24px; }
dialog::backdrop { background: rgba(0, 0, 0, .5); }
/* 팝업이 떠 있는 동안 뒤쪽 스크롤 고정 */
body:has(dialog[open]) { overflow: hidden; }
// 배경(dialog 바깥 영역) 클릭 시 닫기
notice.addEventListener('click', (e) => {
if (e.target === notice) notice.close();
});3. 적용 전에 확인할 것
- dialog의 모달 기능은 아이폰 사파리 15.4부터 지원합니다. 그보다 오래된 기기 비중이 높은 사이트라면 기존 방식을 유지하는 편이 안전합니다.
:has()는 비교적 최근 문법이라, 오래된 브라우저에서는 뒤쪽 스크롤만 고정되지 않을 뿐 팝업 자체는 정상 동작합니다.- "오늘 하루 보지 않기"처럼 자동으로 뜨는 팝업도 같은 구조로 만들고, 쿠키나 localStorage 값을 확인한 뒤
showModal()을 부르면 됩니다.
"브라우저가 이미 해 주는 일은 브라우저에 맡기는 것이 가장 튼튼한 코드입니다."
나눔웹은 리뉴얼 때 오래된 팝업 스크립트를 걷어내고
키보드와 모바일에서도 자연스럽게 닫히는 팝업으로 정리해 드립니다.