Modal은 기본적으로 화면 중앙에 정렬되며, 디자인 및 기획에 따라 좌측, 우측, 상단 등 다양한 위치로 배치할 수 있습니다.
아래 예시는 가운데 정렬 예시이며, 배경은 시각적 구분을 위해 투명도 있는 색상으로 표시되었습니다.

Modal은 크기에 따라 is-sm, 기본(Default, medium), is-lg로 구분됩니다.

기본적으로 Modal은 높이에 제한이 없으며, 배경(페이지)에 스크롤이 생깁니다.
.modal 요소에 .has-inner-scroll 클래스를 추가하면 Modal 내부에만 스크롤이 생성되어 외부 배경은 고정됩니다.

Modal 컨트롤러는 다중 모달 스택을 지원하므로, 부모 모달에서 자식 모달을 호출할 수 있습니다.
아래 예시는 부모 모달 안에서 버튼을 눌러 또 다른 모달을 띄우는 예시입니다.

Template Demo List

아래는 customTemplates에 등록된 모든 모달을 자동으로 불러온 목록입니다.

Modal의 호출, 닫기, 포커스 관리 등 상세 동작은 src/assets/js/controllers/common/dialog/modal.js에서 확인할 수 있습니다.