Modal

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/button.css" />
<link rel="stylesheet" href="/guide/css/components/modal.css" />

<script src="/guide/js/components/modal.js"></script>

Live

Variants

Small — 400px

Modal Title

내용이 들어갑니다

Medium — 600px

Modal Title

내용이 들어갑니다

Large — 800px

Modal Title

내용이 들어갑니다

Specs

Variant Width Padding Gap Border Radius Overlay
Small 400px 20px (--spacing-5) 16px (--spacing-4) 12px (--radius-lg) rgba(0,0,0,0.5)
Medium 600px 20px 16px 12px
Large 800px 20px 16px 12px

Code

<!-- 열기 트리거 -->
<button data-modal-open="my-modal">모달 열기</button>

<!-- 모달 (Small 기본, --md / --lg 수정자로 크기 변경) -->
<div class="modal" id="my-modal" hidden>
  <div class="modal__backdrop"></div>
  <div class="modal__dialog">
    <div class="modal__header">
      <h2 class="modal__title">Modal Title</h2>
    </div>
    <hr class="modal__divider" />
    <div class="modal__body">
      <p class="modal__text">내용이 들어갑니다</p>
    </div>
    <hr class="modal__divider" />
    <div class="modal__footer">
      <button class="button button--secondary button--sm">Cancel</button>
      <button class="button button--primary button--sm">Confirm</button>
    </div>
    <button class="modal__close" aria-label="닫기">×</button>
  </div>
</div>

<script src="/guide/js/components/modal.js"></script>

Classes

클래스 타입 설명
.modal 루트 오버레이 컨테이너. hidden 속성으로 표시/숨김
.modal__backdrop 요소 반투명 배경 (클릭 시 닫힘)
.modal__dialog 요소 다이얼로그 카드 (기본 400px)
.modal__dialog--md 수정자 Medium — 최대 너비 600px
.modal__dialog--lg 수정자 Large — 최대 너비 800px
.modal__header 요소 제목 + 닫기 버튼 행
.modal__title 요소 모달 제목 (Paperlogy Bold 24px)
.modal__close 요소 닫기 버튼. JS가 이벤트 감지
.modal__divider 요소 구분선 <hr>
.modal__body 요소 본문 영역 (min-height 100px)
.modal__text 요소 본문 텍스트 (Pretendard 18px)
.modal__footer 요소 하단 버튼 영역