[FISH-NEWS] 프로젝트 기록

            <button class="popup_close">

                <i class="fas fa-times"></i>

            </button>

 

• 주저리

거의 막바지에 다다랐다.

엊그제 올려야 했던 글이었지만

어제 교수님을 뵙고 친구들을 만나러 전주로 가서 오늘 늦게 돌아오는 바람에 오늘에서야 작성중. 

 

 

 

• 목표

책 이미지를 누르게 되면 책 이미지와 이 책에 대한 설명이 적힌 팝업 띄우기

아래 이미지가 그 예시이다.

 

 

 

 

 

• 문제 상황

 

위 이미지처럼 오른쪽 위에 위치해야하는 x표가 계속 사라졌다.

사라졌던 이유를 그 당시 정리해놓지 않아서 확실하지는 않지만

 <section class="ad__items_popup">

            <button class="popup_close">

                <i class="fas fa-times"></i>

            </button>

        </section>

당시 HTML이 이런 식으로 작성되었었는데

JS로 ad__items_popup의 HTML을 변경했기 때문에 

 

이 부분이 새로 변경한 ad__items_popup에 밀려 사라졌던 것 같다.

 

 

 

 

• 문제 해결 과정

당시 생각했던 방법은 두가지였다.

1. innerHTML으로 popup_close까지 만드는 것

2. HTML을 조금 더 세분화해서 나누는 것(이미지 + 글) + (x버튼)

 

1번은 addEventListener가 클릭될 때 마다 x표가 나타나는 것이기 때문에 성능면에서 좋지 않을거라는 생각이 들었다.

따라서 HTML을 세분화하였다.

 

        <section class="ad__items_popup">

            <div class="popup_main">

             

            </div>

            <button class="popup_close">

                <i class="fas fa-times"></i>

            </button>

        </section>

    </section>

이렇게.

 

그리고 JS에서는

items.addEventListener("click", (e) => {

  const target = e.target.dataset.item;

  adPopup.style.visibility = "visible";

  popupMain.innerHTML = `

    <img src="images/ads/item${target}" alt="" class="popup_img">

    <span class="popup_info">

        Lorem 

    </span>

    `;

});

popupClose.addEventListener("click", () => {

  adPopup.style.visibility = "hidden";

});

=> 

책 이미지들을 싸고 있는 div인 adItems를 클릭하면

팝업 전체 창을 감싸는 adPopup의 visibility를 visible로 바꾸고

이미지와 글을 싸고 있는 새로운 박스인 popupMain의 innerHTML을 그 책(target)에 맞게 변경한다.

 

그리고 close버튼에 addEventListener을 등록하여 click을 하면 adPopup(팝업창 자체) 를 hidden. 숨긴다