jQuery UI – Zavřít dialogové okno po kliknutí mimo

Mám dialogové okno uživatelského rozhraní jQuery, které se zobrazí po kliknutí na konkrétní prvky. Chtěl bych zavřít dialog, pokud dojde ke kliknutí kdekoli jinde než na spouštěcích prvcích nebo v samotném dialogu.

Zde je kód pro otevření dialogu:

$(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');
    });*/
});

Pokud odkomentuji poslední část, dialog se nikdy neotevře. Předpokládám, že je to proto, že stejné kliknutí, které otevře dialog, jej znovu zavírá.

Konečný pracovní kód
Poznámka:Toto používá plugin jQuery mimo události

$(document).ready(function() {
    // dialog element to .hint
    var $field_hint = $('<div></div>')
            .dialog({
                autoOpen: false,
                minHeight: 0,
                resizable: false,
                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', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
        $field_hint.dialog('option', 'title', $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');
    });
});

Odpověď

Podívejte se na plugin jQuery Outside Events

Umožní vám to:

$field_hint.bind('clickoutside',function(){
    $field_hint.dialog('close');
});