jQuery click outside close – tắt popup khi click bên ngoài

Hôm nay ngồi làm chức năng hiển thị một popup login và khi click chuột bên ngoài popup đó thì sẽ ẩn nó đi, sau đó thấy hiện tại trên kiso.vn chưa có  bài này nên quyết định đăng cho những bạn muốn làm chức năng này.

Để làm được chức năng tắt popup khi click bên ngoài (click outside close) thì bạn phải sử dụng thêm thư viện jQuery để bắt sự kiện khi click vào đối tượng document thì xử lý kiểm tra và ẩn popup.

Sau đây là đoạn code tắt popup khi click bên ngoài được viết bằng jQuery:

$(document).click(function (e)
{
    // Đối tượng container chứa popup
    var container = $("selector_to_element_popup_wrapper");

    // Nếu click bên ngoài đối tượng container thì ẩn nó đi
    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
    }
});

Bạn chỉ việc dán đoạn code này vào trong thẻ script là nó hoạt động. Tuy nhiên cần lưu ý là bạn phải truyền giá trị CSS selector tới thẻ HTML của popup nhé.

Bài viết này được đăng tại [kiso.vn]

Xem DEMO tại chức năng login của trang twitter (góc phải trên cùng): Xem link