<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for FrontEnd developer</title>
<style>
button {
all: unset;
background-color: steelblue;
color: white;
padding: 5px 20px;
border-radius: 5px;
cursor: pointer;
}
.modal {
/* background-color: blue; */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.modal__overlay {
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
}
.modal__content {
background-color: white;
padding: 50px 100px;
text-align: center;
position: relative;
width: 20%;
top: 0px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 10px;
}
h1 {
margin: 0;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<button id="open">Open Modal</button>
<div class="modal hidden">
<div class="modal__overlay"></div>
<div class="modal__content">
<h1>I'm modal</h1>
<button>❌</button>
</div>
</div>
<script>
const openButten = document.getElementById("open");
const modal = document.querySelector(".modal");
const overlay = modal.querySelector(".modal__overlay");
const closeBtn = modal.querySelector("button");
const openModal = () => {
modal.classList.remove("hidden");
}
const closeModal = () => {
console.log("close btn click")
modal.classList.add("hidden")
}
openButten.addEventListener("click", openModal)
closeBtn.addEventListener("click", closeModal);
overlay.addEventListener("click", closeModal);
</script>
</body>
</html>'웹 개발 > 바닐라js' 카테고리의 다른 글
| [따라만들기] content_slider(개선전) (0) | 2022.02.20 |
|---|---|
| [따라만들기] back to top 버튼 (0) | 2022.02.20 |
| [따라만들기] carouse slider (0) | 2022.02.20 |
| [드림코딩] 클릭 후 좌표 가져오기 (0) | 2021.09.21 |
| [드림코딩] 윈도우 사이즈 가져오기 (0) | 2021.09.21 |
[따라만들기] modal popup