modal close 모달창 닫는 이벤트 만들기

728x90

closeBtn.addEventListener("click", e => {
    detail_marker_modal.style.display = "none"
});​

<div id="modal" style="display:hidden;">
        <div >
            <div class="close-area">X</div>
            ..내용채워넣기
        </div>
    </div>

모달창을 만들어준다. 

우선 모달창은 style display:hidden으로 설정해준다.

그리고 이벤트가 생겼을 때에 style속성을 없애주거나 display:bolck 처리하면 모달이 생겨난다.

 

모달창 닫는 공간을 div로 만들어 준후 

 

const closeBtn = modal.querySelector(".close-area")

querySelector를 이용해서 닫기 버튼을 const변수에 지정해준후

 

closeBtn.addEventListener("click", e => {
    modal.style.display = "none"
});

 

이런식으로 해주면 버튼 클릭시 모달창이 닫힌다.

 

 

 

---

번외로 모달창 바깥영역을 클릭할 때 닫히게 만들어주면 사용하기 훨씬 편하다. (주관적인 내생각)

modal.addEventListener("click", e => {
    const evTarget = e.target
    if(evTarget.classList.contains("modal")) {
        modal.style.display = "none"
    }
});

 

이런식으로 모달에 이벤트를 주면 바깥영역을 클릭하면 모달이 닫힌다!