Skip to main content

Dialog

MSK Dialog는 확인, 경고, 짧은 입력처럼 사용자의 명확한 판단이 필요한 흐름을 담당합니다. 기본 구현은 native <dialog>를 우선 사용하고, 프로젝트는 내부 body만 구성합니다.

Preview

Data API

<button type="button" data-msk-dialog-target="#delete-confirm">
  삭제
</button>

<dialog id="delete-confirm">
  <div class="msk-ui-dialog__header">
    <h2 class="msk-ui-dialog__title">삭제할까요?</h2>
    <button type="button" class="msk-ui-dialog__close" data-msk-dialog-close>×</button>
  </div>
  <div class="msk-ui-dialog__body">삭제 후에는 복구할 수 없습니다.</div>
</dialog>

JavaScript API

const dialog = document.querySelector('#delete-confirm');

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

Rules

제목, 본문, 버튼은 기존 DOM으로 작성합니다.
rich HTML 문자열을 주입하지 않습니다.
backdrop click 닫기는 기본 허용이며 data-msk-dialog-close-on-backdrop="false"로 막을 수 있습니다.
더 큰 복합 폼은 같은 primitive를 쓰되 화면 문서에서는 modal 패턴으로 분리해 설명합니다.

Preview
Data API
JavaScript API
Rules