HTML
<body>
<button class="btn" id="modalBtn">Open Modal</button>
<div class="modal-container" id="modal-container">
<div class="modal-content">
<h1>Hello World</h1>
<div class="close" id="close">
<i class="fa fa-times"></i>
</div>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor natus
cupiditate, obcaecati odio sit ducimus eos dolores accusantium tenetur
rem.
</p>
</div>
</div>
</body>
CSS
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
background: #8fcfd1;
color: white;
font-weight: 700;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
.btn:focus {
outline: none;
}
.modal-container {
display: none;
background: rgb(0, 0, 0, 0.6);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.modal-content {
background: #fff;
width: 400px;
max-width: 100%;
padding: 20px;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-content .close {
cursor: pointer;
position: absolute;
top: 5px;
right: 5px;
}
.modal-content p {
padding: 5px 0;
}
JavaScript
const btn = document.getElementById("modalBtn");
const modalContainer = document.getElementById("modal-container");
const close = document.getElementById("close");
btn.addEventListener("click", () => {
modalContainer.style.display = "block";
});
close.addEventListener("click", () => {
modalContainer.style.display = "none";
});
window.addEventListener("click", (e) => {
e.target.classList.contains("modal-container")
? (modalContainer.style.display = "none")
: false;
});
저녁 운동하러 가기 전에
정말 간단한 modal 창 만들기 복습을 해봤다!!
저번 프로젝트에서 사용한 방식 그대로.
css 파트를 너무 대충 만들었지만 ㅋㅋㅋㅋ
이제 모달창은 자신있게 만들 수 있다요!!!!!!!!!!
'Mini Projects' 카테고리의 다른 글
| Hangman (2) - html (0) | 2020.07.19 |
|---|---|
| Hangman (1) - Draw Hangman with SVG (0) | 2020.07.19 |
| Menu Slider & Modal (6) - wrap up (0) | 2020.07.17 |
| Menu Slider & Modal (5) - Toggle (0) | 2020.07.17 |
| Menu Slider & Modal (4) - Style Modal (0) | 2020.07.17 |
