dialog - 单击非模态对话框外部以关闭

Question

根据我之前的研究，我已经能够弄清楚如何在对话框周围的覆盖层上触发实时点击事件以关闭对话框。但是，这限制了此对话框功能的进一步发展，使其成为模态的。如果我将对话框设置为非模态，则没有覆盖来触发点击事件。如何设置对话框(现在不是模态的)以在不使用覆盖单击事件的情况下单击它外部时关闭？

这是我的对话框和随后的实时点击事件，它允许我从覆盖中关闭对话框:

$("#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 事件绑定(bind)到文档本身，然后排除对话框，我们可以复制 live 函数的功能以进行叠加。在代码下方，我包含了一个演示解决方案的 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/