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 freetuts.net 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.

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Để 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 [free tuts .net]

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

Bài trước Bài tiếp

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

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

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

fadeIn() và fadeOut() trong jQuery

Show() và Hide() trong jQuery

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

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

Cùng chuyên mục:

Cách dùng .bind() trong JQuery

Cách dùng .delegate() trong JQuery

slideUp() và slideDown() trong jQuery

fadeIn() và fadeOut() trong jQuery

Show() và Hide() trong jQuery

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Giới thiệu

Thủ thuật

Link hay

Liên kết