Cách đóng hộp thoại giao diện người dùng jQuery bằng cách nhấp vào bên ngoài khu vực được bao phủ bởi hộp?

Question

Tôi đang sử dụng jQuery 1.6 và jQuery UI. Tôi đã triển khai thành công cửa sổ modal dialog có chiều rộng gần 50% chiều rộng trang web của ứng dụng của tôi. Tôi muốn cung cấp cho người dùng một cách khác để đóng hộp thoại để khi anh ấy nhấp vào bên ngoài khu vực được bao phủ trên trang bằng "hộp phương thức", hộp này sẽ bị đóng như thể người dùng nhấp vào " nút "" x "chuẩn ở trên cùng bên phải của nút đó.

Tôi làm cách nào để làm điều đó?

Answer 1

Để làm rõ, câu trả lời của Victor chỉ hoạt động nếu hộp thoại được đặt thành autoOpen: true, giá trị mặc định của hộp thoại, và bạn không mở hộp thoại lần nữa với sự kiện. Nếu bạn mở hộp thoại có sự kiện như click tại bất kỳ thời điểm nào cho dù autoOpen được đặt thành true hoặc false thì bạn phải sử dụng jQuery.live.

Fiddle chứng minh thất bại của lớp phủ click kiện với autoOpen: false: http://jsfiddle.net/GKfZM/

Fiddle chứng minh như thế nào live làm việc với autoOpen: false và với click sự kiện: http://jsfiddle.net/GKfZM/1/

Tóm tắt: Câu trả lời Victor của chỉ hoạt động trong điều kiện nhất định.

Tutorial link

Answer 2

Cập nhật

Đây là câu trả lời đầu tiên:

$(".ui-widget-overlay").click (function() { 
    $("#your-dialog-id").dialog("close"); 
}); 

Đây là giải pháp làm việc:

$('.ui-widget-overlay').live('click', function() { 
    $('#your-dialog-id').dialog("close"); 
}); 

Answer 3

Làm thế nào về cách này, bằng cách này bạn có thể đóng hộp thoại bất cứ điều gì nó mở cửa từ đâu và đó id. Đó là một chức năng toàn cầu:

$("body").on("click",".ui-widget-overlay",function() { 
    $(".ui-dialog-titlebar-close").click(); 
    }); 

Answer 4

Bạn có hai lựa chọn cho đóng cửa hộp thoại mô hình

$('#your-dialog-id').modal('toggle'); 

HOẶC

bạn có thể sử dụng sự kiện click trực tiếp khi bạn nhấp bên ngoài hộp

$("#your-dialog-id .close").click()