Cách đóng cửa sổ phương thức khi người dùng nhấp vào bên ngoài cửa sổ, với JavaScript đơn giản

Tìm hiểu cách đóng cửa sổ phương thức hoặc bất kỳ phần tử giao diện người dùng nào, khi người dùng nhấp vào bên ngoài cửa sổ đó bằng JavaScript đơn giản.

Các cửa sổ bật lên theo phương thức thường gây khó chịu, đặc biệt là khi chúng chiếm toàn bộ màn hình của bạn. Đặc biệt khó chịu khi chúng xảy ra trong vài giây sau khi bạn truy cập trang web. Thật ngu ngốc và đó là thiết kế UX tồi.

Một số trang web đưa nó lên cấp độ tiếp theo và quyết định đặt nút phương thức đóng (X) quá nhỏ và ở vị trí kỳ lạ để bạn có đủ thời gian để thực sự bực mình khi giải câu đố mà bạn có thể quên tại sao bạn lại truy cập trang web đó trong phần vị trí đầu tiên.

Hãy sửa nó.

HTML:một cửa sổ phương thức đơn giản

Thêm mã sau vào tài liệu HTML của bạn:

<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:simple modal &button style

.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:phát hiện tất cả các nhấp chuột trên tài liệu

Mã JavaScript sau sẽ đóng cửa sổ phương thức nếu người dùng nhấp vào bên ngoài phần tử phương thức hoặc nếu họ nhấp vào nút 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"
}

Nhận tất cả mã ở đây.

Điều gì xảy ra trong mã:

• Đầu tiên, chúng tôi thiết lập trình xử lý sự kiện nhấp chuột trên tài liệu document vật. Điều này có nghĩa là bất kỳ nhấp chuột nào, ở bất kỳ đâu trên tài liệu HTML đều được đăng ký và bây giờ chúng ta có thể chạy các hàm cho mỗi nhấp chuột bên trong dấu ngoặc nhọn { .. } .
• Sau đó, chúng tôi thiết lập hai cách / mục tiêu để đóng cửa sổ phương thức, bằng cách nhấp vào nút hoặc nhấp bên ngoài cửa sổ phương thức.
• Bên trong câu lệnh if chúng tôi nói “nếu mục tiêu phù hợp với nút (matches(".button-close-modal") ) hoặc (|| ) mục tiêu không xảy ra trên cửa sổ phương thức !event.target.closest(".modal") , sau đó gọi closeModal() chức năng.
• Khi closeModal() hàm được gọi, nó chọn .modal bộ chọn lớp và ẩn nó bằng display = 'none' .

closest() phương thức tìm kiếm phần tử phù hợp nhất với phần tử có bộ chọn mà bạn chuyển vào, trong trường hợp này, chúng tôi chuyển vào bộ chọn lớp (.modal ).

matches() phương thức kiểm tra xem event.target có khớp với một bộ chọn cụ thể hay không, trong trường hợp này, nó là bộ chọn lớp nút đóng .button-close-modal .