单击非模态对话框外关闭 [英] Click outside non-modal dialog to close

问题描述

根据我之前的研究，我已经能够找出如何在对话框周围的叠加层上触发实时点击事件以关闭对话框。然而，这限制了该对话特征的进一步发展为模态。如果我将对话框设置为非模态，则没有重叠以触发点击事件。在不使用重叠点击事件的情况下，当我点击其外部时，如何设置对话框（现在不是模态）以关闭？

Per my previous research, I've been able to figure out how to trigger a live click event on the overlay around a dialog to close the dialog. However, that restricts further development of this dialog feature to being modal. If I set the dialog to non-modal, there is no overlay to trigger the click event. How can I set up the dialog (which is now not modal) to close when I click outside it without using the overlay click event?

这是我的对话框和后续允许我从叠加层关闭对话框的实时点击事件：

Here is my dialog and the subsequent live click event that allows me to close the dialog from the overlay:

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

推荐答案

终于找出了我自己问题的答案。通过将mousedown事件绑定到文档本身，然后排除对话框，我们可以复制覆盖层的live函数的功能。下面的代码我已经包括一个jsFiddle演示解决方案。

Finally figured out the answer to my own question. By binding a mousedown event to the document itself and then excluding the dialog, we can duplicate the functionality of the live function for overlays. Below the code I've included a jsFiddle demonstrating the solution.

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

这篇关于单击非模态对话框外关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！