Skip to main content

Modal

MSK Modal은 복합 폼, 상세 보기, 단계형 작업처럼 dialog보다 큰 화면 흐름을 담당합니다. 확인 질문은 dialog, 더 큰 편집 흐름은 modal로 분리합니다.

Preview

Data API

<button type="button" data-msk-modal-target="#edit-profile">
  프로필 편집
</button>

<dialog id="edit-profile" data-msk-modal>
  <div class="msk-ui-modal__header">
    <h2 class="msk-ui-modal__title">프로필 편집</h2>
    <button type="button" class="msk-ui-modal__close" data-msk-modal-close>×</button>
  </div>
  <div class="msk-ui-modal__body">폼 내용</div>
</dialog>

JavaScript API

const modal = document.querySelector('#edit-profile');

window.MSK.ui.modal.open(modal);
window.MSK.ui.modal.close(modal);

Rules

native <dialog>를 우선 사용합니다.
body는 기존 DOM으로 작성하고 HTML 문자열을 주입하지 않습니다.
backdrop click 닫기는 기본 허용이며 data-msk-modal-close-on-backdrop="false"로 막을 수 있습니다.

Preview
Data API
JavaScript API
Rules