jQuery UI-在外部单击时关闭对话框

我有一个jQuery UI对话框，当单击特定元素时会显示该对话框。如果在那些触发元素或对话框本身之外的任何地方都单击了鼠标，我想关闭对话框。

这是打开对话框的代码：

$(document).ready(function() {
    var $field_hint = $('<div></div>')
        .dialog({
            autoOpen: false,minHeight: 50,resizable: false,width: 375
        });

    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html($hint.html());
        $field_hint.dialog('option','position',[162,$hint.offset().top + 25]);
        $field_hint.dialog('option','title',$hint.siblings('label').html());
        $field_hint.dialog('open');
    });
    /*$(document).click(function() {
        $field_hint.dialog('close');
    });*/
});

如果我取消最后一部分的注释，该对话框将永远不会打开。我认为这是因为打开对话框的同一点击再次将其关闭。

最后的工作代码
注意：这是使用 jQuery外部事件插件

$(document).ready(function() {
    // dialog element to .hint
    var $field_hint = $('<div></div>')
            .dialog({
                autoOpen: false,minHeight: 0,width: 376
            })
            .bind('clickoutside',function(E) {
                $target = $(e.target);
                if (!$target.filter('.hint').length
                        && !$target.filter('.hintclickicon').length) {
                    $field_hint.dialog('close');
                }
            });

    // attach dialog element to .hint elements
    $('.hint').click(function() {
        var $hint = $(this);
        $field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
        $field_hint.dialog('option',[$hint.offset().left - 384,$hint.offset().top + 24 - $(document).scrollTop()]);
        $field_hint.dialog('option',$hint.siblings('label').html());
        $field_hint.dialog('open');
    });

    // trigger .hint dialog with an anchor tag referencing the form element
    $('.hintclickicon').click(function(E) {
        e.preventDefault();
        $($(this).get(0).hash + ' .hint').trigger('click');
    });
});