웹 서비스에서는 화면전환이 아닌 팝업을 통해서 새로운 창을 열어야할 때 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;
}