저번 프로젝트를 할때 모달창을 창이 변하는 형식으로 야매로 만들어서 이번 프로젝트를 하면서 진짜 모달창을 만들어 보고 싶었습니다.
에서 앨범 정보 div에 있는 앨범에 btn-modal이라는 id를 지정 하여 , 앨범 클릭시 모달창이 연동 되도록 하였습니다.
<div class="flex-container center">
<div class="flex-item" id="btn-modal" style="margin: 5px 5px; ">
<img
src="https://velog.velcdn.com/images/taeeuno_o/post/3efce04a-c7c8-4fb2-8c73-bd26e1cf9a5c/image.jpg">
</div>
<div class="flex-item">1111가나다라마바사아자카차타파하</div>
<div class="flex-item" style="width: 20%; ">가수 명</div>
<div class="flex-item_like">
<input type='checkbox' name='like2' value='like2' id="like2" style="width: 20%;" />
<label for="like2" class="mylike">
<span class="material-symbols-outlined" id="like2">
favorite
</span>
</label>
</div>
</div>
이런식으로 모달 창이 열리며 모달창이 닫히는 조건은
- 모달창 바깥 부분을 누를때
- ESC를 누를때
- x 표시를 누를때
로 구현 하였습니다.
- JavaScript
const loremIpsum = document.getElementById("lorem-ipsum")
fetch("https://baconipsum.com/api/?type=all-meat¶s=200&format=html")
.then(response => response.text())
.then(result => loremIpsum.innerHTML = result)
const modal = document.getElementById("modal")
console.log(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()
})
// x 버튼 누르면 모달창 닫침
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()
}
})
// ESC누르면 모달창 닫침
window.addEventListener("keyup", e => {
if (isModalOn() && e.key === "Escape") {
modalOff()
}
})- CSS
/* 모달창 만들기 */
#modal.modal-overlay {
z-index: 1000;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
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(255, 255, 255, 0.7);
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: 550px;
height: 660px;
/* position: relative; */
top: -600px;
padding: 10px;
}
#modal .title {
padding-left: 10px;
display: inline;
text-shadow: 1px 1px 2px gray;
color: rgb(251, 249, 249);
}
#modal .title h2 {
display: inline;
}
/* 닫기 */
#modal .close-area {
font-size: 30px;
display: inline;
float: right;
padding-right: 10px;
cursor: pointer;
text-shadow: 1px 1px 2px gray;
color: white;
}
#modal .close-area:hover {
/* border: 3px solid blue; */
color: rgb(52, 151, 250);
}
#modal .content {
margin-top: 1px;
padding: 0px 10px;
text-shadow: 1px 1px 2px gray;
color: white;
}
#modal.modal-overlay {
display: none;
}
- HTML
<!-- 상세정보창 (모달) -->
<div id="modal" class="modal-overlay">
<div class="modal-window">
<div class="title" style="font-size:20px;">
<h2>상세정보</h2>
</div>
<!-- 닫기버튼 -->
<div class="close-area">x</div>
<!-- 앨범 표지 -->
<div class="content">
<div class="flex-item" style="width: 100%;">
<img class="modal_image" style="width:50%; float:center; margin: 10px auto;"
src="https://velog.velcdn.com/images/taeeuno_o/post/3efce04a-c7c8-4fb2-8c73-bd26e1cf9a5c/image.jpg">
</div>
<div class="music_detail">
<br>
<!-- 앨범 정보 차트 -->
<table class="music_detail" style=" margin:auto; height: 25%;">
<!-- 곡 제목 -->
<tr class="music_detail_title">
<th> 곡 제목</th>
<td>두번째 칸</td>
</tr>
<!-- 곡 제목 끝 -->
<!-- 가수 -->
<tr class="music_detail_singer">
<th>가수</th>
<td>두번째 칸</td>
</tr>
<!-- 가수 끝 -->
<!-- 작곡가 -->
<tr class="music_detail_composer">
<th>작곡가</th>
<td>두번째 칸</td>
</tr>
<!-- 작곡가 끝 -->
<!-- 작사가 -->
<tr class="music_detail_lyricist">
<th>작사가</th>
<td>두번째 칸</td>
</tr>
<!-- 작사가 끝 -->
<tr clsdd="music_detail_youtube">
<th colspan='2'>
<p class="youtube_link" style="font-size:10px; text-align: center;"> <img style="margin:1px; width: 30px;" src="https://velog.velcdn.com/images/taeeuno_o/post/ddad6a03-082b-404c-9ecd-ffe2b1920282/image.png">유튜브 링크</p>
</th>
</tr>
</table>
</div>
</div>
</div>모든 프로젝트를 통 틀어 아무것도 없는 베이스에서 스스로 찾아가면서 한 가장 열심히 한 부분이였습니다. 두달이 넘는 시간동안 가장 열심히한게 이거라는게 창피하기는 하지만, 몰입해서 하는 제 자신을 보며 코딩쪽으로 아예 가능성이 없지는 않다는 생각을 하게되었습니다.
나는 탱구