我有一个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, 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'); }); });
查看jQuery Outside Events插件
让您做:
$field_hint.bind('clickoutside',function(){ $field_hint.dialog('close'); });