jQuery로 간단한 모달 팝업 만들기 – 초보자도 따라하는 실습 가이드

 

 

안녕하세요 😊
웹페이지에서 공지사항, 이미지 확대, 로그인 창 등을 띄울 때
모달 팝업은 정말 자주 사용됩니다.
이번 글에서는 jQuery로 간단하게 모달 팝업을 구현하는 방법을 단계별로 안내드립니다.

---

📍 1. 기본 HTML 구조

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

<div id="myModal" class="modal">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <h2>모달 제목</h2>
    <p>여기에 내용을 작성하세요.</p>
  </div>
</div>

• .modal : 모달 전체 영역 (기본적으로 숨김)
• .modal-content : 팝업 내부 내용
• .close : 닫기 버튼

---

📍 2. CSS 스타일

.modal {
  display: none; /* 기본 숨김 */
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 400px;
  border-radius: 8px;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

 

📌 팁

• z-index로 다른 요소보다 위에 오도록 설정
• background: rgba(0,0,0,0.4)로 반투명 배경 적용

---

📍 3. jQuery 스크립트

$(document).ready(function () {
  // 모달 열기
  $("#openModal").click(function () {
    $("#myModal").fadeIn();
  });

  // 모달 닫기 (X 버튼)
  $("#closeModal").click(function () {
    $("#myModal").fadeOut();
  });

  // 모달 영역 바깥 클릭 시 닫기
  $(window).click(function (e) {
    if ($(e.target).is("#myModal")) {
      $("#myModal").fadeOut();
    }
  });
});

• .fadeIn() / .fadeOut() 으로 부드러운 애니메이션
• 모달 외부 클릭 시 닫히도록 이벤트 처리

---

📍 4. 추가 기능 아이디어

• ESC 키로 닫기:

$(document).keydown(function (e) {
  if (e.key === "Escape") {
    $("#myModal").fadeOut();
  }
});

• 열릴 때 포커스 이동 → 접근성 강화
• 닫힐 때 스크롤 방지 (overflow: hidden 적용)

---

📍 5. 실무 적용 팁

• 팝업 내용을 Ajax로 불러와 동적으로 변경 가능
• 여러 모달을 관리하려면 data-id 속성 사용
• CSS로 반응형 스타일 추가해 모바일에서도 사용 가능

---

✅ 마무리

jQuery를 사용하면 간단한 모달 팝업을
몇 줄의 코드로 구현할 수 있습니다.
UI/UX에 맞춰 스타일을 다듬고,
접근성과 반응형까지 고려하면 실무에서도 충분히 활용 가능합니다. 😊