OP-가이드-Modal

Modal · Popup

구조 .modal-overlay(딤) > .modal-box > .modal-head + .modal-body + .modal-foot. 열기/닫기는 openModal(id) · [data-modal-close](_common.js) · 딤 클릭. 폭 변형은 .modal-box--…. 확인 = .btn-navy(DB-700), 취소 = .btn-navy-sub(DB-500).

표준 팝업 (Alert) .modal-box · 제목+X / 본문 / 취소(DB-500)·확인(DB-700)

<div class="modal-overlay" id="sample" style="display:none">
  <div class="modal-box">
    <div class="modal-head">
      <h2 class="modal-title">제목</h2>
      <button class="modal-close" data-modal-close aria-label="닫기"><svg…X…></button>
    </div>
    <div class="modal-body"><p class="modal-msg">내용</p></div>
    <div class="modal-foot">
      <button class="btn btn-navy-sub" data-modal-close>취소</button>
      <button class="btn btn-navy">확인</button>
    </div>
  </div>
</div>

<!-- 열기: openModal('sample') -->

알림 팝업 (아이콘) .modal-alert(아이콘 40 + 메시지) · X 없음 · 확인 단일버튼

<div class="modal-box">
  <div class="modal-head"><h2 class="modal-title">제목</h2></div>
  <div class="modal-box modal-box--sm alert">
    <div class="modal-alert">
      <span class="modal-icon"><img src="/img/icons/state/success.svg" alt=""></span>
      <p class="modal-msg">내용</p>
    </div>
  </div>
  <div class="modal-foot"><button class="btn btn-navy">확인</button></div>
</div>

폼형 변형 (로그인 플로우) .modal-box--terms(690) · .modal-box--pw(800) — 표준 기반, 본문만 폼형

약관 동의 팝업(690) 열기 ID·비밀번호 변경 팝업(800) 열기

Raw · Log 블록 (.raw) 에러 원문/전문/로그 등 서식 없는 텍스트. <pre class="raw"> · 연회색 배경·모노스페이스·자동 줄바꿈·세로 스크롤(max-h 360). 모달 본문 외 어디서든 사용 가능(common)

<pre class="raw">There is no CARD_CUSTOMIZATION_MESSAGE.</pre>

There is no CARD_CUSTOMIZATION_MESSAGE.

Modal · Popup

Title

Title