Javascript

Javascript - 모달 만들기

Starters 2020. 9. 6. 17:58

모달이란?

- 기존의 브라우저 내용 가리면서 팝업처럼 뜨는 것

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Counter App</title>
    <link rel="stylesheet" href="modal.css">
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button id="open">모달 열기</button>
    <div class="modal-wrapper">
      <div class="modal">
        <div class="modal-title">
          안녕하세요
        </div>
        <p>모달 내용입니다~~~~</p>
        <div class="close-wrapper">
          <button id="close">닫기</button>
        </div>
      </div>
    </div>

    <script src="modal.js"></script>

  </body>
</html>

CSS

.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 p{
  font-size: 16px;
}

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

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

JS

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";
}

저작자표시 (새창열림)