[JS] 모달 창의 배경이 화면을 덮어서 작동하지 않는 에러 해결하기

Web / JavaScript 개발 💻

에러 발생 🚨

모달 창 만들기를 하다가 이런 에러가 발생했다.

'버튼 열기' 버튼을 누른 후 모달 창이 나와야 하는데, 이미 나와있어서 아무것도 클릭이 안 되는 상황이었다.

이때 생각한 문제 상황과 방법은 다음과 같았다.

• 문제 상황 : 모달을 처음부터 꺼놓는 곳을 만들지 않았다. (실제로 코드에는 있었지만 작동하지 않는다.)
• 방법 : 웹사이트가 로딩될 때 모달이 꺼져있게 설정하도록 코드를 수정한다.

코드 👩🏻‍💻

<!-- html -->
    <h1>안녕하세요!</h1>
    <p>내용내용내용</p>
    <button id="btn_open_modal">버튼 열기</button>
    
    <div class="modal">
        <div class="modalContent">
            <h3>안녕하세요</h3>
            <p>모달 내용은 어쩌고 저쩌고..</p>
            <button id="btn_close_modal">닫기</button>
        </div>
    </div>

// JavaScript
    const modal = document.querySelector('.modalContent');
    const btnOpenModal = document.getElementById("btn_open_modal");
    const btnCloseModal = document.getElementById("btn_close_modal");

    modal.style.display = "none";
    btnOpenModal.addEventListener("click", ()=>{
        modal.style.display="flex";
    });
    btnCloseModal.addEventListener("click", ()=>{
        modal.style.display="none";
    });

위 코드를 보면, modal 이라는 변수에 modalContent를 넣고, style.display로 가렸다 나왔다 하도록 만들었다. 문제가 없어보이지만 HTML의 'modalContent'만 가렸다 나왔다 해주고 있기 때문에 한 번 나왔던 modal은 계속 유지되는 것을 알 수 있었다.

해결 방법 ✅

'classList'를 사용하여 modal class와 modalContent class를 모두 가림/보임 상태로 전환시켜주도록 했다.
또한, css 파일에 '.modal.hidden' 셀렉터를 추가하여 hidden이 display: none이 되는 것임을 명시해주었다.

// javascript
    const modal = document.querySelector('.modal'); // modalContent -> modal
    const btnOpenModal = document.getElementById("btn_open_modal");
    const btnCloseModal = document.getElementById("btn_close_modal");

    btnOpenModal.addEventListener("click", ()=>{
        modal.classList.remove('hidden'); // classList!
    });
    btnCloseModal.addEventListener("click", ()=>{
        modal.classList.add('hidden'); // classList!
    });

/* css */
.modal.hidden {
    display: none;
}

참고 사이트

• 모달 창 Modal (https://velog.io/@bami/%EB%AA%A8%EB%8B%AC-%EC%B0%BD-Modal)