[Javascript/ECMAScript6/ES6] 모달 만들기


이글은 “벨로퍼트”님의 동영상 강의를 보고 정리한 내용입니다.


모달 만들기

모달이란, 다음 이미지와 같이 기존의 내용을 가리고 나타나는 메시지박스 같은 형태의 UI 를 의미합니다.

이번에는 이런 UI 를 HTML 과 JavaScript 를 사용하여 만들어보겠습니다.

우선, Codesandbox 에서 새로운 Vanilla Sandbox 를 만드세요.

그리고, index.js 를 열고 맨 위 import “./styles.css”; 하단의 코드를 지워주세요.

이번에 우리는 스타일링을 할 것이기 때문에 css 를 불러와야 합니다.

그 다음에, index.html 을 열어서 다음과 같이 수정해주세요.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button>버튼 열기</button>
    <script src="src/index.js"></script>
  </body>
</html>

이렇게 화면이 나타났나요?

그 다음엔, 버튼 아래에 다음 내용을 보여주세요.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button>버튼 열기</button>
    <div class="modal-wrapper">
      <div class="modal">
        <div class="modal-title">안녕하세요</div>
        <p>모달 내용은 어쩌고 저쩌고..</p>
        <div class="close-wrapper">
          <button>닫기</button>
        </div>
      </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

그러면 다음과 같이 보여질텐데요

여기에 CSS 로 스타일링을 해보겠습니다.

src 디렉터리 안에 들어있는 styles.css 파일을 열어서 다음과 같이 수정해보세요.

body {
  font-family: sans-serif;
}

.modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  padding: 24px 16px;
  border-radius: 4px;
  width: 320px;
}

.modal-title {
  font-size: 24px;
  font-weight: bold;
}

.modal p {
  font-size: 16px;
}

.close-wrapper {
  text-align: right;
}

그럼 다음과 같이 나타날 것입니다.


display 스타일을 사용하여 모달 열고 닫기

이제 모달을 열고 닫는 기능을 구현해보겠습니다. 방법은 굉장히 간단한데요, 바로 display 스타일을 사용하는 것 입니다. index.html 을 다음과 같이 수정해보세요. .modal-wrapper 쪽에는 인라인 스타일이 추가되었고, 각 버튼에 id 가 붙었습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button id="open">버튼 열기</button>
    <div class="modal-wrapper" style="display: none;">
      <div class="modal">
        <div class="modal-title">안녕하세요</div>
        <p>모달 내용은 어쩌고 저쩌고..</p>
        <div class="close-wrapper">
          <button id="close">닫기</button>
        </div>
      </div>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

display: none; 스타일을 사용하게 되면 해당 엘리먼트는 화면에서 숨겨지게됩니다.

이제, index.js 를 열어서 버튼과 모달의 DOM 을 선택해주고, 클릭 이벤트를 설정해주세요

import "./styles.css";

const open = document.getElementById("open");
const close = document.getElementById("close");
const modal = document.querySelector(".modal-wrapper");
open.onclick = () => {
  modal.style.display = "flex";
};
close.onclick = () => {
  modal.style.display = "none";
};

id 가 아닌 클래스로 DOM을 선택하고 싶을땐 document.getElementsByClassName 또는 document.querySelector 를 사용하면 됩니다. document.querySelector 를 사용하여 class 값으로 DOM 을 선택 할 때에는 텍스트 앞에 . 을 붙여주어야 합니다.

이제 버튼들을 눌러보세요. 잘 작동하나요?