TeamProject_영화 검색 사이트

모달 구현

 

 const movieSection = document.getElementById("movieSection");

  movieSection.innerHTML = "";

  movieSection.innerHTML = movieInfo;

  function openModal(text) {

    const modal = document.getElementById("modal");

    const modalText = document.getElementById("modalText");

    modalText.innerHTML = text;

    modal.style.display = "block";

  }

  function closeModal() {

    const modal = document.getElementById("modal");

    modal.style.display = "none";

  }

  const closeBtn = document.getElementsByClassName("close")[0];

  closeBtn.onclick = function () {

    closeModal();

  };

  window.onclick = function (event) {

    const modal = document.getElementById("modal");

    if (event.target == modal) {

      closeModal();

    }

  };

  document.addEventListener("click", (event) => {

    const viewModal = event.target.closest(".movieInfo");

    if (viewModal) {

      const modalId = viewModal.id;

      const movieData = responseArray.find(

        (movie) => movie.id === parseInt(modalId)

      );

      if (movieData) {

        openModal(`

        <div class="movieInfo" id="${modalId}">

          ${movieData.poster_path}" />

          <p class="movieTitle" id="movieName">${movieData.title}</p>

          <p class="movieOverview">${movieData.overview}</p>

          <p class="movieVoteAverage">Rating: ${movieData.vote_average}</p>

        </div>

      `);

      }

    }

  });

 

    <div class="modal" id="modal">

      <div class="modalContent">

        <span class="close">&times;</span>

        <p id="modalText"></p>

      </div>

    </div>

 

 

.modal {

  display: none;

  position: fixed;

  z-index: 1;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.4);

}

.modalContent {

  background-color: #fefefe;

  margin: 15% auto;

  padding: 20px;

  border: 1px solid #888;

  width: 30%;

}

.close {

  color: #aaa;

  float: right;

  font-size: 28px;

  font-weight: bold;

}

.close:hover,

.close:focus {

  color: black;

  text-decoration: none;

  cursor: pointer;

}

 

어찌어찌 검색 끝에 모달창 구현을 해냈지만 아직 코드의 이해가 완벽하지 않아 리뷰를 더 해볼 필요가 있어보인다