바닐라 JavaScript를 사용하여 사용자가 외부를 클릭할 때 모달 창을 닫는 방법

기본 자바스크립트를 사용하여 사용자가 외부를 클릭할 때 모달 창 또는 모든 UI 요소를 닫는 방법을 알아보세요.

모달 팝업은 특히 전체 화면을 차지할 때 일반적으로 성가십니다. 웹 사이트에 들어간 지 몇 초 이내에 발생할 때 특히 성가신 일입니다. 어리석은 짓이고 UX 디자인도 좋지 않습니다.

일부 웹 사이트는 다음 단계로 나아가서 닫기 모달(X) 버튼을 너무 작고 이상한 위치에 만들기로 결정하여 퍼즐을 푸는 동안 정말로 화를 낼 만큼 충분한 시간을 갖게 되며 1위.

수정합시다.

HTML:간단한 모달 창

HTML 문서에 다음 코드를 추가하십시오.

<main>
  <div class="modal">
    <button class="button-close-modal">X</button>

    <h2>Subscribe to my Newsletter</h2>

    <p>Get access to exclusive content that only share with my email list</p>

    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" />
  </div>
</main>

CSS:단순 모달 및 버튼 스타일

.modal {
  padding: 2rem;
  border: 1px solid #eee;
  width: max-content;
  position: fixed;
  right: 0;
  bottom: 0;
  max-width: 100%;
}

.button-close-modal {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  margin-left: auto;
}

JavaScript:문서의 모든 클릭 감지

다음 JavaScript 코드는 사용자가 모달 요소 외부를 클릭하거나 X 버튼을 클릭하면 모달 창을 닫습니다.

document.addEventListener(
  "click",
  function(event) {
    // If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
    if (
      event.target.matches(".button-close-modal") ||
      !event.target.closest(".modal")
    ) {
      closeModal()
    }
  },
  false
)

function closeModal() {
  document.querySelector(".modal").style.display = "none"
}

여기에서 모든 코드를 받으세요.

코드에서 일어나는 일:

• 먼저 document에 클릭 이벤트 리스너를 설정합니다. 물체. 즉, HTML 문서의 아무 곳에서나 클릭이 등록되고 이제 중괄호 { .. } 안의 모든 클릭에 대해 함수를 실행할 수 있습니다. .
• 그런 다음 버튼을 클릭하거나 모달 창 외부를 클릭하여 모달 창을 닫는 두 가지 방법/대상을 설정합니다.
• if 문 내부 "대상이 버튼과 일치하는 경우(matches(".button-close-modal") ) 또는 (|| ) 대상이 모달 창 !event.target.closest(".modal")에서 발생하지 않습니다. , 다음 closeModal() 호출 기능.
• closeModal() 함수가 호출되면 .modal을 선택합니다. 클래스 선택기를 만들고 display = 'none'으로 숨깁니다. .

closest() 메서드는 전달한 선택기가 있는 요소와 가장 근접하게 일치하는 부모를 찾습니다. 이 경우에는 클래스 선택기(.modal)를 전달합니다. ).

matches() 메서드는 event.target이 특정 선택기와 일치하는지 확인합니다. 이 경우 닫기 버튼 클래스 선택기 .button-close-modal .