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'); });