點擊外部非模態對話框關閉

Question

根據我以前的研究，我已經能夠弄清楚如何觸發對話框上的疊加層上的實時點擊事件以關閉對話框。但是，這限制了這種對話功能進一步發展爲模態。如果我將對話框設置爲非模態，則不會觸發點擊事件。如何在不使用疊加點擊事件的情況下點擊外部對話框（現在不是模態）來關閉對話框？

這裏是我的對話和隨後的現場click事件，讓我從覆蓋關閉對話框：

$("#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

最後想出答案我自己的問題。通過將mousedown事件綁定到文檔本身，然後排除對話框，我們可以複製疊加層的實時功能的功能。在代碼下面我包含了一個展示解決方案的jsFiddle。

// 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/