点击外部非模态对话框关闭

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/