UI Blocks 33 / 40

Popups & Modals

팝업 공지·모달·오늘 그만보기 — 서로 다른 구성을 한 화면에 모았습니다. 필요한 것을 골라 페이지에 그대로 옮겨 쓰십시오.

전체 목록 모든 예시는 이 테마의 @theme 토큰만 사용합니다.

중앙 모달 공지

화면 한가운데를 덮는 가장 강한 형태. 닫기 버튼·Esc·바깥 누르기 세 가지 닫는 길을 모두 갖춘다.

시연 무대 — 실제로는 화면 전체를 덮습니다

화면 아래에 깔리는 고지. 「오늘 그만보기」는 정본 훅이 브라우저 저장소에 기억한다.

시연 무대 — 실제로는 화면 아래에 붙습니다

이 사이트는 예약 확인과 서비스 개선을 위해 최소한의 정보를 저장합니다. 자세한 내용은 개인정보 처리방침에서 확인하실 수 있습니다.

화면 오른쪽 아래에 작게 뜨는 카드. 본문을 거의 가리지 않아 상시 안내에 맞는다.

시연 무대 — 실제로는 화면 오른쪽 아래에 붙습니다

포스터 한 장이 주인공인 팝업. 매 방문마다 뜨면 성가시므로 「오늘 하루 열지 않기」를 함께 둔다.

시연 무대 — 실제로는 화면 전체를 덮습니다

한 번 더 묻는 작은 상자. 되돌릴 수 있는 동작이라 경고 색을 쓰지 않는다.

시연 무대 — 실제로는 화면 전체를 덮습니다

오른쪽에서 들어오는 패널. 뒤 화면을 남겨 두므로 목록을 보면서 상세를 곁들일 때 맞는다.

시연 무대 — 실제로는 화면 오른쪽 끝에서 밀려 나옵니다

본문 흐름 안에 놓아 아무것도 가리지 않는 알림. 닫으면 정본 훅이 기억한다.

안내 · 국가 구강검진 대상자 확인

2026년도 국가 구강검진 대상자 확인 기간이 12월 말까지입니다. 대상자 확인 방법 보기

알릴 것이 여럿일 때 팝업을 겹쳐 띄우지 않고 한 상자 안에서 단계로 넘긴다.

시연 무대 — 실제로는 화면 전체를 덮습니다