jquery 모달창 만들기

자바스크립트를 사용하여 모달창을 구현하는 방법은 여러 가지가 있지만, 가장 기본적인 방법은 다음과 같습니다.

HTML 구조 작성
모달창을 구현하기 위해 먼저 HTML 구조를 작성해야 합니다. 예를 들어, 다음과 같은 HTML 코드를 작성할 수 있습니다.

<!-- 모달 버튼 -->
<button id="modalBtn">모달 열기</button>

<!-- 모달창 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>모달 내용</p>
  </div>
</div>

CSS 스타일 작성
HTML 구조에 대한 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;
}

자바스크립트 코드 작성
마지막으로, 모달 버튼을 클릭하면 모달창이 열리도록 자바스크립트 코드를 작성해야 합니다. 예를 들어, 다음과 같은 자바스크립트 코드를 작성할 수 있습니다.

// 모달 버튼과 모달창 가져오기
var modalBtn = document.getElementById("modalBtn");
var modal = document.getElementById("myModal");

// 모달 버튼을 클릭하면 모달창을 열도록 이벤트 리스너 등록
modalBtn.onclick = function() {
  modal.style.display = "block";
};

// 모달 닫기 버튼 클릭 시 모달창 닫도록 이벤트 리스너 등록
var closeBtn = modal.querySelector(".close");
closeBtn.onclick = function() {
  modal.style.display = "none";
};

// 모달 외부 클릭 시 모달창 닫도록 이벤트 리스너 등록
window.onclick = function(event) {
  if (event.target == modal) {