728x90
TIL
📌
오늘 한 일
모달창 만들기 공부
프로젝트 회의
오늘은 아침에 주말에 하려고 했던 모달창 기능을 구현해봤다. 구글링 하면서 구현했던 거 같음
이걸 정상적으로 구현은 했지만 중요한 건 내 프로젝트에 어떻게 적용하느냐 그게 중요한 거 같다.
오전은 모달을 만들고 오후에는 내일 프로젝트에 대해서 회의를 하고 SA를 썼음
역시 프로젝트하기 전 SA가 제일 힘든 거 같다. API부분 빼고 대부분 작성했다.
내일은 API부분이랑 발제 듣고 SA 수정할 거 같음 API부분이 제일 시간이 오래 걸리는데 좀 걱정이다.
모달창
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal</title>
<style>
/* http://yoonbumtae.com/?p=3632 여기 참고하기 */
#modal.modal-overlay {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
#modal .modal-window {
background: rgba( 69, 139, 197, 0.70 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 13.5px );
-webkit-backdrop-filter: blur( 13.5px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
width: 400px;
height: 500px;
position: relative;
top: -100px;
padding: 10px;
}
#modal .title {
padding-left: 10px;
display: inline;
text-shadow: 1px 1px 2px gray;
color: white;
}
#modal .title h2 {
display: inline;
}
#modal .close-area {
display: inline;
float: right;
padding-right: 10px;
cursor: pointer;
text-shadow: 1px 1px 2px gray;
color: white;
}
#modal .content {
margin-top: 20px;
padding: 0px 10px;
text-shadow: 1px 1px 2px gray;
color: white;
}
</style>
</head>
<body>
<div id="container">
<h2>Lorem Ipsum</h2>
<button id="btn-modal">모달 창 열기 버튼</button>
<div id="lorem-ipsum"></div>
</div>
<!--여기부터 모달-->
<div id="modal" class="modal-overlay">
<div class="modal-window">
<div class="title">
<h2>모달</h2>
</div>
<div class="close-area">X</div>
<div class="content">
<p>가나다라마바사 아자차카타파하</p>
<p>가나다라마바사 아자차카타파하</p>
<p>가나다라마바사 아자차카타파하</p>
<p>가나다라마바사 아자차카타파하</p>
</div>
</div>
</div>
<script>
const modal = document.getElementById("modal")
function modalOn() {
modal.style.display = "flex"
}
function isModalOn() {
return modal.style.display === "flex"
}
function modalOff() {
modal.style.display = "none"
}
const btnModal = document.getElementById("btn-modal")
btnModal.addEventListener("click", e => {
modalOn()
})
const closeBtn = modal.querySelector(".close-area")
closeBtn.addEventListener("click", e => {
modalOff()
})
modal.addEventListener("click", e => {
const evTarget = e.target
if(evTarget.classList.contains("modal-overlay")) {
modalOff()
}
})
window.addEventListener("keyup", e => {
if(isModalOn() && e.key === "Escape") {
modalOff()
}
})
</script>
</body>
</html>
시연 영상
728x90
'내일배움캠프' 카테고리의 다른 글
| 73. 내일배움캠프 - 58일차 TIL (0) | 2022.11.25 |
|---|---|
| 72. 내일배움캠프 - 57일차 TIL (0) | 2022.11.23 |
| 70. 내일배움캠프 - 12주차 WIL (1) | 2022.11.20 |
| 69. 내일배움캠프 - 55일차 TIL (0) | 2022.11.20 |
| 68. 내일배움캠프 - 54일차 TIL (3) | 2022.11.17 |
댓글