웹 개발에서 모달 창은 사용자와의 상호 작용을 강화하고 사용자 경험을 개선하는 데 유용합니다. 이번 포스트에서는 jQuery를 사용하여 간단한 모달 창을 만드는 방법을 알아보겠습니다.

1. HTML 구조 설정

먼저, 모달 창을 나타내는 HTML 요소를 준비합니다. 보통 모달 창은 화면 상단에 보이지 않는 상태로 숨겨둔 후 필요할 때 보여주는 방식으로 구현됩니다.

<button id="openModal">모달 열기</button>
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>모달 내용이 여기에 들어갑니다.</p>
  </div>
</div>

2. CSS 스타일링

모달 창을 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;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

3. jQuery를 사용한 모달 제어

jQuery를 사용하여 모달 창을 제어합니다. 특정 버튼을 클릭했을 때 모달을 보여주고, 닫기 버튼을 클릭했을 때 모달을 숨깁니다.

$(document).ready(function(){
  $("#openModal").click(function(){
    $("#myModal").show();
  });
  $(".close").click(function(){
    $("#myModal").hide();
  });
});

마치며

이제, jQuery를 사용하여 간단한 모달 창을 만드는 방법에 대해 알아보았습니다. 모달 창은 사용자에게 중요한 정보를 강조하거나 추가적인 작업을 유도하는 등 다양하게 활용될 수 있으며, 여기서는 간단한 예제를 통해 기본적인 구현 방법을 익혔습니다.

참고문헌: W3Schools - How To Create a Modal Box