Làm cách nào để đóng hộp thoại phương thức trong JavaScript?

Tìm hiểu cách đóng cửa sổ phương thức hoặc bất kỳ thành phần 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 vanilla JavaScript

Cửa sổ bật lên 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. Nó đặc biệt khó chịu khi chúng xảy ra trong vòng vài giây sau khi bạn vào trang web. Thật ngu ngốc và đó là thiết kế UX tồi

Một số trang web đưa nó lên một tầm cao mới và quyết định làm cho nút đóng phương thức [X] nhỏ và có vị trí kỳ quặc đến mức bạn chỉ có đủ thời gian để thực sự tức giận khi giải câu đố mà bạn có thể quên mất lý do tại sao bạn truy cập trang web đó trong phần

Hãy sửa nó

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

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

  
    X

    Subscribe to my Newsletter

    Get access to exclusive content that only share with my email list

    Enter your email:
    
  

CSS. kiểu dáng nút & phương thức đơn giản

.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

Đoạn 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ả cá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 đối tượng document. Điều này có nghĩa là bất kỳ lần nhấp chuột nào, bất kỳ vị trí nào trên tài liệu HTML đều được đăng ký và bây giờ chúng tôi có thể chạy các chức năng cho mỗi lần 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 một lần nhấp vào nút hoặc bằng một lần nhấp bên ngoài cửa sổ phương thức
• Bên trong câu lệnh if, chúng ta nói “nếu mục tiêu khớp với nút [matches[".button-close-modal"]] hoặc [||] thì mục tiêu không xảy ra trên cửa sổ phương thức !event.target.closest[".modal"], thì hãy gọi hàm closeModal[]
• Khi hàm closeModal[] được gọi, nó sẽ chọn bộ chọn lớp

  .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;
  }

  0 và ẩn nó bằng

  .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;
  }

  1

Phương thức

.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;
}

2 tìm kiếm phần tử cha khớp gần nhất với phần tử có bộ chọn mà bạn truyền vào, trong trường hợp này, chúng ta truyền vào bộ chọn lớp [

.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;
}

0]

Phương thức

.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;
}

4 kiểm tra xem sự kiện. mục tiêu khớp với một bộ chọn cụ thể, trong trường hợp này, đó là bộ chọn lớp nút đóng

.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;
}

5