[javascript] jQuery를 사용하여 모달 창과 팝업 알림 구현하기

01 Dec 2023

javascript

소개

jQuery는 웹 개발을 편리하게 해주는 자바스크립트 라이브러리로, 다양한 기능을 손쉽게 구현할 수 있습니다. 이번 포스트에서는 jQuery를 사용하여 모달 창과 팝업 알림을 구현하는 방법을 알아보겠습니다.

모달 창 구현

jQuery를 사용하면 모달 창을 쉽게 구현할 수 있습니다. 모달 창은 사용자가 추가 정보를 입력하거나 작업을 수행하기 위해 필요한 창입니다. 다음은 모달 창을 구현하는 간단한 예제 코드입니다.

// HTML
<button id="openModal">모달 열기</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>모달 창</h2>
    <p>모달 창 내용...</p>
  </div>
</div>

// CSS
.modal {
  display: none; /* 기본적으로 모달 창을 숨김 */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4); /* 배경을 투명도 있는 검은색으로 설정 */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

// JavaScript
$(document).ready(function() {
  $("#openModal").click(function() {
    $("#myModal").css("display", "block"); // 모달 창 보이기
  });

  $(".close").click(function() {
    $("#myModal").css("display", "none"); // 모달 창 닫기
  });
});

위 예제 코드에서는 “#openModal” 버튼을 클릭하면 “#myModal” 모달 창이 보이고, “x” 버튼을 클릭하면 모달 창이 닫힙니다.

팝업 알림 구현

팝업 알림은 사용자에게 짧은 메시지를 보여주는 기능입니다. jQuery를 사용하여 팝업 알림을 구현하는 방법은 다음과 같습니다.

// HTML
<button id="showAlert">알림 보이기</button>
<div id="myAlert" class="alert">알림 내용...</div>

// CSS
.alert {
  display: none; /* 기본적으로 알림을 숨김 */
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: #f44336;
  color: white;
}

// JavaScript
$(document).ready(function() {
  $("#showAlert").click(function() {
    $("#myAlert").fadeIn(); // 알림 보이기
    setTimeout(function() {
      $("#myAlert").fadeOut(); // 알림 숨기기
    }, 3000); // 3초 후에 알림 숨김
  });
});

위 예제 코드에서는 “#showAlert” 버튼을 클릭하면 “#myAlert” 팝업 알림이 나타나고, 3초 후에 알림이 사라집니다.

결론

jQuery를 사용하면 모달 창과 팝업 알림을 쉽게 구현할 수 있습니다. 위 예제 코드를 참고하여 웹 애플리케이션에 모달 창이나 팝업 알림을 추가해보세요. 좀 더 다양한 스타일링과 기능을 적용할 수도 있습니다. jQuery 공식 문서와 다른 자료들도 참고하여 더 자세한 내용을 학습해보세요.

목차

소개

모달 창 구현

팝업 알림 구현

결론