Cách Đóng Modal Khi Click Bên Ngoài, Với Vanilla JavaScript

Học cách đóng modal window, hoặc bất kỳ phần tử UI nào, khi người dùng click bên ngoài, với vanilla JavaScript.

Modal popup thường gây phiền toái, nhất là khi chiếm toàn màn hình. Đặc biệt phiền khi xuất hiện ngay sau vài giây vào trang. Đó là thiết kế UX tồi.

Một số trang web còn tệ hơn: nút đóng (X) nhỏ và đặt vị trí lạ, khiến bạn mất thời gian tìm nút bấm mà quên lý do truy cập trang.

Hãy sửa nó.

HTML: Modal window đơn giản

Thêm mã sau vào tài liệu HTML:

<main> <div class="modal"> <button class="button-close-modal">X</button> <h2>Đăng ký Newsletter</h2> <p>Truy cập nội dung độc quyền chỉ chia sẻ qua email</p> <label for="email">Nhập email:</label> <input type="email" id="email" name="email" /> </div> </main>

CSS: Style modal & nút đơ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ả click trên document

Mã JavaScript sau sẽ đóng modal nếu người dùng click nút X HOẶC click bên ngoài modal:

document.addEventListener( "click", function(event) { // Nếu click nút X HOẶC click bên ngoài modal, đóng modal bằng closeModal() if ( event.target.matches(".button-close-modal") || !event.target.closest(".modal") ) { closeModal() } }, false ) function closeModal() { document.querySelector(".modal").style.display = "none" }

Lấy toàn bộ mã tại đây.

Giải thích mã:

• Thiết lập event listener click trên object document. Mọi click trên trang HTML đều được đăng ký, có thể chạy function cho mỗi click bên trong ngoặc nhọn { .. }.
• Thiết lập hai cách/mục tiêu đóng modal: click nút hoặc click bên ngoài modal.
• Bên trong if statement: "nếu target khớp với nút (matches(".button-close-modal")) HOẶC (||) target KHÔNG nằm trong modal !event.target.closest(".modal"), thì gọi closeModal().
• Khi closeModal() được gọi, nó chọn selector .modal và ẩn bằng display = 'none'.

Phương thức closest() tìm ancestor gần nhất khớp với selector bạn truyền vào, ở đây là class selector .modal.

Phương thức matches() kiểm tra event.target có khớp selector cụ thể không, ở đây là class selector nút đóng .button-close-modal.