자바스크립트로 모달 창 만들기

웹사이트를 돌아다니다 보면 웹브라우저 창이 아닌 웹페이지 자체 창에서 기능을 구현하는 모습을 종종 볼 수 있습니다. 이 기능은 모달 창으로 불리는 것으로, 원래의 페이지에서 하나의 윈도우를 생성하여 별도의 기능을 구현하는 방법입니다. 그래픽 유저 인터페이스의 대표적인 기능 중 하나이며, 웹개발에서는 자바스크립트와 CSS를 이용하여 구현할 수 있습니다.

이 글에서는 자바스크립트로 모달 창을 만드는 방법을 설명하겠습니다. 모달 창은 사용자가 다른 작업을 수행하기 전에 어떤 정보를 입력하거나 확인해야 할 때 사용하거나, 기존의 웹페이지보다 확장된 기능을 제공할 때 사용하면 좋습니다.

1. HTML 마크업 작성하기

먼저 모달창을 위한 HTML 마크업을 작성해야 합니다. 보통 모달 창은 div 태그로 구성하는 것이 일반적이며, 모달창 내용과 버튼 등을 구성합니다. 이때, 모달창을 감싸는 외부 div를 만들고 id를 부여합니다. 이 id는 자바스크립트에서 모달 창을 조작할 때 사용합니다. 아래 소스코드에서는 modal-content 하나의 class만 사용하고 있지만, 여러 개의 모달창을 만들어야 한다면 가변 #modal은 모달 창 배경화면을 덮는 스타일을 정의합니다. position: fixed와 z-index: 9999 속성으로 모달창이 항상 위에 보이도록 설정합니다.class를 사용해도 됩니다.

<div id="modal">
  <div class="modal-content">
    <h2>모달창 제목</h2>
    <p>모달창 내용</p>
    <button id="close-modal">닫기</button>
  </div>
</div>

가변 class는 자바스크립트를 통해 부여할 수 있습니다. 예를 들면, modal-contents-00000처럼 모달 창마다 고유의 번호를 부여하여 class를 적용시키면 됩니다. 고유 번호는 자바스크립트 함수를 이용하려 랜덤으로 생성할 수 있습니다.

2. CSS 스타일 작성하기

모달 창이 보이지 않는 상태에서는 화면에 나타나지 않아야 하므로, CSS로 모달 창을 숨기는 스타일을 추가합니다. 또한, 모달창이 활성화되었을 때 배경 화면이 흐리게 보이게 하는 스타일도 추가합니다.

#modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.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. JavaScript로 모달창 열기/닫기 기능 구현하기

화면상에 모달창을 나타나게 하려면 자바스크립트로 모달 창을 보이게 해야 합니다. 그리고 모달창이 열릴 때는 스크롤바가 보이지 않도록 설정하고, 모달창의 배경을 흐리게 만들어야 합니다.

const modal = document.getElementById("modal");
const openModalBtn = document.getElementById("open-modal");
const closeModalBtn = document.getElementById("close-modal");

// 모달창 열기
openModalBtn.addEventListener("click", () => {
  modal.style.display = "block";
  document.body.style.overflow = "hidden"; // 스크롤바 제거
});

// 모달창 닫기
closeModalBtn.addEventListener("click", () => {
  modal.style.display = "none";
  document.body.style.overflow = "auto"; // 스크롤바 보이기
});

위 자바스크립트 소스코드에서는 document.getElementById 메소드를 사용하여 HTML로 만들어져 있는 모달 창과 버튼 요소를 가져옵니다. 그리고 addEventListener 메소드를 사용하여 열기 버튼과 닫기 버튼에 클릭 이벤트를 등록합니다.

열기 버튼을 클릭하면 modal.style.display 속성을 “block”으로 변경하여 모달창이 보이게 합니다. 이때 document.body.style.overflow 속성을 “hidden”으로 설정하여 스크롤바가 보이지 않도록 합니다.

닫기 버튼을 클릭하면 modal.style.display 속성을 “none”으로 설정하여 모달창이 보이지 않도록 합니다. 이때 document.body.style.overflow 속성을 “auto”으로 설정하여 스크롤바가 보이도록 합니다.

4. 모달 창 드래그 앤 드롭 기능 추가하기

드래그 앤 드롭으로 모달 창을 움직일 수 있는 기능은 필요할 때만 추가하도록 합니다. 보통 이 기능이 필요하지는 않지만, 여러 개의 모달 창을 출력해야 하는 경우, 우수한 GUI 경험을 제공하기 위해 모달 창 이동 기능을 지원하는 것은 나쁘지 않다고 생각합니다.

let isDragging = false;
let modalOffsetX;
let modalOffsetY;

// 모달창 드래그 시작
modal.addEventListener("mousedown", (event) => {
  isDragging = true;
  modalOffsetX = event.offsetX;
  modalOffsetY = event.offsetY;
});

// 모달창 드래그 중
modal.addEventListener("mousemove", (event) => {
  if (isDragging) {
    const x = event.clientX - modalOffsetX;
    const y = event.clientY - modalOffsetY;
    modal.style.left = `${x}px`;
    modal.style.top = `${y}px`;
  }
});

// 모달창 드래그 종료
modal.addEventListener("mouseup", () => {
  isDragging = false;
});

위 자바스크립트 소스코드에서는 mousedown, mousemove, mouseup 이벤트를 사용하여 모달 창을 드래그할 때의 동작을 구현합니다.

모달 창을 드래그하기 위해 mousedown 이벤트를 모달 창 요소에 등록합니다. 이때 event.offsetX와 event.offsetY 속성을 사용하여 마우스 클릭 위치와 모달 창 요소의 위치를 계산합니다.

그리고 mousemove 이벤트를 등록하여 마우스가 움직일 때 모달창이 따라 움직이도록 합니다. 이때 event.clientX와 event.clientY 속성을 사용하여 현재 마우스 위치를 계산합니다.

마지막으로 mouseup 이벤트를 등록하여 마우스 버튼이 떼어질 때 드래그 동작이 종료되도록 합니다.

이제 모달 창을 드래그할 수 있게 되었습니다. 모달 창의 위치를 조절할 수 있는 CSS 스타일을 추가하면 더욱 사용자 친화적인 모달 창을 만들 수 있습니다.

5. Windows와 유사한 모달 창 만들기

우리가 사용하는 마이크로소프트의 Windows와 유사한 모달 창을 만드는 방법에 대해서 찾아봤습니다. 여러 가지 방법이 있으나, 순수 자바스크립트와 CSS를 이용하는 방법 중에서 가장 쉬운 방법은 아래와 같습니다.

<div id="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">제목</h4>
        <button type="button" class="close" id="close-modal">&times;</button>
      </div>
      <div class="modal-body">
        <p>모달 내용</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" id="close-modal">닫기</button>
        <button type="button" class="btn btn-primary">확인</button>
      </div>
    </div>
  </div>
</div>

Windows와 유사한 환경을 제공하기 위해 조금 복잡한 HTML 마크업이 필요합니다. 상단 제목표시줄과 기능 단추까지 구현할 수 있다면, 그렇게 도전해보는 것도 좋아 보입니다.

#modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-dialog {
  margin: 15% auto;
  width: 60%;
  background-color: #fff;
  box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
}

.modal-content {
  padding: 20px;
}

.modal-header {
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  background-color: #f7f7f7;
  border-radius: 5px 5px 0 0;
}

.modal-title {
  margin: 0;
}

.modal-body {
  padding: 15px;
}

.modal-footer {
  padding: 10px 15px;
  border-top: 1px solid #eee;
  background-color: #f7f7f7;
  border-radius: 0 0 5px 5px;
  text-align: right;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-secondary {
  color: #444;
  background-color: #f7f7f7;
  border-color: #ddd;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  color: #444;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: 0;
}

#modal은 모달 창 배경화면을 덮는 스타일을 정의합니다. position: fixed와 z-index: 9999 속성으로 모달 창이 항상 위에 보이도록 설정합니다.

.modal-dialog는 모달 창의 위치와 크기를 설정합니다. margin: 15% auto 속성으로 모달 창을 화면 중앙에 위치시킵니다.

.modal-content는 모달 창 내용의 스타일을 설정합니다. padding 속성으로 내용과 경계의 여백을 설정합니다.

.modal-header, .modal-body, .modal-footer는 모달 창의 헤더, 바디, 푸터의 스타일을 설정합니다.

.btn은 버튼 요소의 스타일을 설정합니다. .btn-primary와 .btn-secondary는 각각 기본 버튼과 보조 버튼의 스타일을 설정합니다.

.close는 닫기 버튼의 스타일을 설정합니다. float: right 속성으로 버튼을 오른쪽에 위치시키고, opacity: 0 속성으로 버튼을 처음에는 숨깁니다. 자바스크립트 소스코드에서 열기 버튼을 클릭했을 때 이 속성을 변경하여 버튼을 보이게 합니다.

지금까지 자바스크립트와 CSS를 사용하여 모달 창을 만드는 방법에 대해서 알아봤습니다. 모달 창 기능은 필요할 때 적절하게 사용하면 우수한 사용자 환경을 제공할 수 있습니다. 그러니 웹사이트의 어디에서 모달 창 기능을 사용하면 좋을지 고민해보시기 바랍니다.