Modal

boh001·2020년 6월 30일
0

Javascript

목록 보기
2/3

웹 서비스에서는 화면전환이 아닌 팝업을 통해서 새로운 창을 열어야할 때 Modal을 이용한다.

  • 모달을 팝업할 때에 전체 화면을 회색으로 만들고 팝업시킨다.
  • 모달 의외의 화면을 누르면 닫는다.
const title = document.getElementById("pageTitle");

const modals = document.getElementById("modals");

const modal = document.getElementById("modal");

title.addEventListener("click", () => {
  modals.style.display = "flex";
});

const close = (e) => {
  if (e.target == modals) {
    modals.style.display = "none";
  }
};
window.onclick = close;

  • 나머지 코드
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1 id="pageTitle">Infinity scroll</h1>
      <div id="modals">
        <h1 id="modal">Hello, I'm modal</h1>
      </div>
    </header>
  </body>
  <script src="index.js"></script>
</html>
#modals {
  position: fixed;
  width: 100%;
  min-height: 100%;
  background-color: rgb(0, 0, 0, 0.4);
  // opacity로 만들면 modal도 흐려짐
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 30%;
  font-size: 30px;
  background-color: red;
}

0개의 댓글