모달창 학습

모달 열기/닫기, 배경 클릭 닫기 동작을 jQuery로 구현한 예시입니다.

이미지

모달 UI 참고 이미지

프롬프트

"배경 클릭 또는 닫기 버튼으로 닫히는 접근성 좋은 모달을 만들어줘."

코드

HTML

<button id="openModal">모달 열기</button>

<div id="modalContainer" class="hidden">
  <div id="modalContent">
    <h2>안내 메시지</h2>
    <p>이것은 모달창입니다. 배경을 클릭하거나 버튼을 눌러 닫으세요.</p>
    <button id="closeModal">닫기</button>
  </div>
</div>

CSS (중요한 스타일)

/* 배경을 어둡게 만들어 뒤쪽 클릭을 막습니다 */
#modalContainer {
  position: fixed; /* 화면에 고정 */
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 반투명 검정 배경 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 처음에는 보이지 않게 설정 */
.hidden {
  display: none !important;
}

/* 실제 모달 박스 */
#modalContent {
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
}

jQuery (동작 제어)

$(document).ready(function() {
  // 1. 열기 버튼 클릭 시 'hidden' 클래스 제거
  $('#openModal').on('click', function() {
    $('#modalContainer').removeClass('hidden');
  });

  // 2. 닫기 버튼 클릭 시 다시 'hidden' 클래스 추가
  $('#closeModal').on('click', function() {
    $('#modalContainer').addClass('hidden');
  });

  // 3. 모달 배경(검은 부분)을 클릭해도 닫히게 설정
  $('#modalContainer').on('click', function(e) {
    if (e.target === this) {
      $(this).addClass('hidden');
    }
  });
});

실행