[DOM] JavaScript를 사용하여 버튼 클릭 시 팝업 창 숨기

팝업 창 숨기기

먼저 팝업 창을 닫는 버튼을 선택합니다. 이렇게 선택한 버튼에 클릭 이벤트를 추가하여 버튼을 클릭할 때 실행할 함수를 정의합니다.

let closeBtn = document.querySelector(".popup > button");
closeBtn.addEventListener("click", function () {
    // 클릭 시 실행될 부분
    // 2) .popup 태그를 안보이게 함
    document.querySelector(".popup").style.display = "none"; // 팝업 창 숨김
});

위 코드에서 .popup > button 선택자로 버튼을 선택하고, 해당 버튼을 클리하면 팝업창을 숨기도록 설정 됩니다.

 

팝업창을 숨기는 css 스타일을 준비합니다. 팝업창이 보이지 않도록 display:none 스타일을 적용합니다.

.popup {
    display: none;
}

결과