Nhấp vào bên ngoài hộp thoại không có phương thức để đóng

Question

Theo nghiên cứu trước đây của tôi, tôi đã có thể tìm ra cách kích hoạt sự kiện nhấp chuột trực tiếp trên lớp phủ xung quanh hộp thoại để đóng hộp thoại. Tuy nhiên, điều đó hạn chế phát triển hơn nữa tính năng hộp thoại này để được phương thức. Nếu tôi đặt hộp thoại thành không theo kiểu, không có lớp phủ nào để kích hoạt sự kiện nhấp chuột. Làm cách nào để thiết lập hộp thoại (hiện không phải là phương thức) để đóng khi tôi nhấp vào bên ngoài hộp thoại mà không sử dụng sự kiện nhấp chuột lớp phủ?

Đây là hộp thoại của tôi và sự kiện click sống sau này cho phép tôi để đóng hộp thoại từ lớp phủ:

$("#dialog-search").dialog({ 
    resizable: false, 
    height:dimensionData.height, 
    width: dimensionData.width, 
    modal: false, 
    title: dimensionData.title, 
    position: [x,y], 
    close: function(event, ui){ 
     callBack(event,ui); 
    } 
}); 
$('.ui-widget-overlay').live('click', function() { 
    $('#dialog-search').dialog("close"); 
}); 

Answer 1

Cuối cùng đã tìm ra câu trả lời cho câu hỏi của riêng tôi. Bằng cách ràng buộc một sự kiện được biến thành chính tài liệu và sau đó loại trừ hộp thoại, chúng ta có thể nhân đôi chức năng của hàm trực tiếp cho các lớp phủ. Bên dưới mã tôi đã bao gồm một jsFiddle thể hiện giải pháp.

// Listen for document click to close non-modal dialog 
$(document).mousedown(function(e) { 
    var clicked = $(e.target); // get the element clicked 
    if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) { 
     return; // click happened within the dialog, do nothing here 
    } else { // click was outside the dialog, so close it 
     $('#dlg').dialog("close"); 
    } 
}); 

http://jsfiddle.net/elwayman02/Z5KA2/