[SAM2.0]Components

Components - Modal

comment

기본 구조: ui-modal 클래스를 사용하며, 초기 상태는 hidden 속성으로 숨김 처리
모달 컨테이너: ui-modal__container 클래스를 사용하여 모달 콘텐츠 영역 구성
모달 제목: ui-modal__title 클래스를 사용하며, 자동으로 id가 생성되어 aria-labelledby로 연결
닫기 버튼: ui-modal__close-button 클래스 또는 data-action="close-modal" 속성 사용
모달 열기: openModal(modalId) 함수를 호출하여 모달 열기. 트리거 버튼에는 aria-controls="modal-id" 속성 사용
모달 닫기: closeModal(modalId) 함수를 호출하거나, 닫기 버튼 클릭, ESC 키, 백드롭 클릭으로 닫기 가능
키보드 제어: ESC 키로 모달 닫기, Tab 키로 포커스 트랩 (모달 내부에서만 포커스 이동)
백드롭 클릭: 모달 컨테이너 외부 클릭 시 자동으로 닫힘
모달 트리거: aria-controls="modal-id" 속성을 가진 버튼 클릭 시 자동으로 모달 열림
자동 포커스: 모달 열릴 때 닫기 버튼에 자동 포커스, 닫힐 때 이전 포커스 요소로 복귀
스크롤 잠금: 모달이 열릴 때 body의 스크롤 자동 잠금
ARIA 속성: .ui-modal__title의 id와 aria-labelledby 속성 자동 생성
JavaScript 초기화: initModals() 함수가 자동으로 실행되며, 모든 .ui-modal 요소 초기화

Modal

HTML 구조

<!-- 트리거 버튼 -->
<button type="button" class="ui-button ui-button--primary" aria-controls="modal-example" onclick="openModal('modal-example')">모달 열기</button>

<!-- 모달 -->
<div class="ui-modal" id="modal-example" hidden>
  <div class="ui-modal__backdrop"></div>
  <div class="ui-modal__container">
    <div class="ui-modal__header">
      <h2 class="ui-modal__title">모달 제목</h2>
      <button type="button" class="ui-modal__close-button" aria-label="모달 닫기">
        <span class="visually-hidden">닫기</span>
      </button>
    </div>
    <div class="ui-modal__content">
      <p>모달 내용이 여기에 표시됩니다.</p>
    </div>
    <div class="ui-modal__footer">
      <button type="button" class="ui-button ui-button--secondary" data-action="close-modal">취소</button>
      <button type="button" class="ui-button ui-button--primary" data-action="close-modal">확인</button>
    </div>
  </div>
</div>