Popup

공용 팝업. 오버레이는 .modal-overlay, 열닫기는 openModal(id) / closeModal(). 구성: .popup > .popup-head + .popup-body + .popup-foot. 폭 기본 360, 폼형은 .popup--wide(440).

알림형 · 아이콘 .popup-body > .popup-msg (아이콘 40 + 안내 15-M, 가운데) 
<div class="modal-overlay" id="doneModal" style="display: none">
  <div class="popup">
    <div class="popup-head"><h2>제목</h2></div>
    <div class="popup-body">
      <div class="popup-msg">
        <i class="ico ico-success popup-msg-icon"></i>
        <p>처리가 완료되었습니다.</p>
      </div>
    </div>
    <div class="popup-foot">
      <button type="button" class="btn btn-primary" data-modal-close>확인</button>
    </div>
  </div>
</div>

제목

처리가 완료되었습니다.

확인형 · 취소 + 확인 .popup-foot 버튼 2등분(.btn-secondary + .btn-primary, 50h) 
<div class="popup">
  <div class="popup-head"><h2>제목</h2></div>
  <div class="popup-body">
    <div class="popup-msg"><p>정말 진행하시겠습니까?</p></div>
  </div>
  <div class="popup-foot">
    <button type="button" class="btn btn-secondary" data-modal-close>취소</button>
    <button type="button" class="btn btn-primary">확인</button>
  </div>
</div>

제목

정말 진행하시겠습니까?

폼형 · textarea 입력 .popup--wide > .popup-form (안내문구 + .textarea[data-min]) · 글자수·확인 활성 JS 
<div class="popup popup--wide">
  <div class="popup-head popup-head--btn">
    <h2>제목</h2>
    <button type="button" class="popup-close" data-modal-close aria-label="닫기">
      <i class="ico ico-close-s-bold"></i>
    </button>
  </div>
  <div class="popup-body">
    <div class="popup-form">
      <p class="popup-form-guide">안내 문구</p>
      <div class="textarea" data-min="10">
        <textarea class="textarea-field" placeholder="입력" maxlength="50"></textarea>
        <p class="textarea-count"><b>0</b> / 50</p>
      </div>
    </div>
  </div>
  <div class="popup-foot">
    <button type="button" class="btn btn-secondary" data-modal-close>취소</button>
    <button type="button" class="btn btn-primary" data-modal-close disabled>확인</button>
  </div>
</div>

<!-- data-min 이상 입력 시 확인 활성(공통 JS) -->

제목

안내 문구를 10자 이상 50자 이하로 입력해 주세요.

0 / 50

제목 · popup-head 기본(가운데 Bold 16) / .popup-head--btn(우측 X) 
<!-- 기본 -->
<div class="popup-head"><h2>제목</h2></div>

<!-- 닫기(X) -->
<div class="popup-head popup-head--btn">
  <h2>제목</h2>
  <button type="button" class="popup-close" data-modal-close aria-label="닫기">
    <i class="ico ico-close-s-bold"></i>
  </button>
</div>

제목

제목

error_message .error-msg — R-50 배경 박스 + guide-info 아이콘 + R-500 13-M 
<p class="error-msg">
  <i class="ico ico-guide-info"></i>
  <span>에러 메시지 내용</span>
</p>

에러 메시지 내용