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

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.

Để 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 được đăng tại freetuts.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ình luận đã đóng, nếu có thắc mắc hãy đặt câu hỏi tại hoicode.com để admin trả lời.

BÀI VIẾT

notice png LIST home png HOME hot gif BÁO
LỖI
top png TOP