모달
흐름을 끊고 답을 받아야 할 때. 확인·경고·짧은 폼. 내용이 길면 별도 페이지가 낫습니다.
코드
<div class="jt-overlay">
<div class="jt-modal jt-modal-sm" role="dialog" aria-modal="true" aria-labelledby="t">
<h2 class="jt-modal-title" id="t">기록을 폐기할까요?</h2>
<p>되돌릴 수 없습니다.</p>
<div class="jt-modal-actions">
<button class="jt-btn-ghost">취소</button>
<button class="jt-btn-danger">폐기</button>
</div>
</div>
</div>하지 말 것
- z-index 숫자를 직접 쓰지 마세요.
--z-overlay(1100) /--z-modal(1200)이 이미 잡혀 있습니다. - 모달 안에 또 모달을 띄우지 마세요. 사용자가 어디에 있는지 잃습니다.
접근성
- JS로 반드시 해야 할 것 3가지 — ① 열릴 때 포커스를 모달 안으로 ② 닫을 때 원래 버튼으로 되돌리기 ③
Esc로 닫기 role="dialog"aria-modal="true"aria-labelledby세 가지를 함께 씁니다
앱에서 모양 바꾸기
jt-utilities.css를 고치지 말고 아래 변수만 덮어쓰세요(컴포넌트 계약).
노브: --jt-modal-max
.my-page .jt-modal { --jt-modal-max: …; }