Modal + Form

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/button.css" />
<link rel="stylesheet" href="/guide/css/components/form.css" />
<link rel="stylesheet" href="/guide/css/components/modal.css" />

<script src="/guide/js/components/modal.js"></script>

Live

버튼을 클릭해 모달 내 폼을 확인하세요. 취소 버튼·배경 클릭으로 닫힙니다.

Code

<!-- 트리거 -->
<button class="button button--secondary" data-modal-open="my-modal">프로필 수정</button>

<!-- 모달 -->
<div class="modal" id="my-modal" hidden>
  <div class="modal__backdrop"></div>
  <div class="modal__dialog">
    <div class="modal__header">
      <h2 class="modal__title">프로필 수정</h2>
      <button class="modal__close" aria-label="닫기">×</button>
    </div>
    <hr class="modal__divider" />
    <div class="modal__body">
      <div class="form-group">
        <label class="label" for="profile-name">이름</label>
        <input class="input" id="profile-name" type="text" placeholder="홍길동" />
      </div>
      <div class="form-group">
        <label class="label" for="profile-email">이메일</label>
        <input class="input" id="profile-email" type="email" placeholder="email@example.com" />
        <span class="helper-text">로그인 및 알림에 사용됩니다.</span>
      </div>
    </div>
    <hr class="modal__divider" />
    <div class="modal__footer">
      <button class="button button--secondary button--sm modal__close">취소</button>
      <button class="button button--primary button--sm">저장</button>
    </div>
  </div>
</div>

<script src="/guide/js/components/modal.js"></script>