모달 세로 -> 가로 모양으로 변경
document.addEventListener("click", (event) => {
const viewModal = event.target.closest(".card");
if (viewModal) {
const modalId = viewModal.id;
const movieData = movies.find((movie) => movie.id === parseInt(modalId));
if (movieData) {
openModal(`
<div class="modalContent">
<img
class="movieImg"
/>
<div class="movieInfo">
<p class="movieTitle" id="movieName">
${movieData.title}
</p>
<p class="movieOverview">${movieData.overview}</p>
<p class="movieVoteAverage">Rating: ${movieData.vote_average}</p>
</div>
</div>`);
}
}
});
.modal {
font-family: "Daughter_handwriting", sans-serif;
display: none;
position: fixed;
z-index: 3;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.movieInfo {
display: flex;
flex-direction: column;
margin-left: 20px;
flex: 1;
}
.movieTitle {
font-size: 100px;
}
.movieOverview {
font-size: 30px;
}
.movieVoteAverage {
font-size: 50px;
}
.modalButton {
font-family: "Daughter_handwriting", sans-serif;
background-color: #888;
position: absolute;
font-size: 35px;
bottom: 10px;
right: 10px;
width: 90px;
height: 45px;
}
.modalContent {
color: black;
display: flex;
flex-direction: row;
align-items: flex-start;
background-color: #fefefe;
margin: 2% auto;
border: 1px solid #888;
width: 80%;
max-width: 1180px;
max-height: 805px;
position: relative;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
body.scroll {
overflow: hidden;
}