jQuery UI - 在外部单击时关闭对话框 [英] jQuery UI - Close Dialog When Clicked Outside
问题描述
我有一个 jQuery UI 对话框,单击特定元素时会显示该对话框.如果点击发生在触发元素或对话框本身以外的任何地方,我想关闭对话框.
这是打开对话框的代码:
$(document).ready(function() {var $field_hint = $('').对话({自动打开:假,最小高度:50,可调整大小:假,宽度: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('打开');});/*$(document).click(function() {$field_hint.dialog('关闭');});*/});
如果我取消对最后一部分的注释,对话框将永远不会打开.我认为这是因为打开对话框的同一次点击再次关闭了它.
<小时>最终工作代码
注意:这是使用 jQuery 外部事件 插件
$(document).ready(function() {//对话框元素到 .hintvar $field_hint = $('').对话({自动打开:假,最小高度:0,可调整大小:假,宽度:376}).bind('clickoutside', function(e) {$target = $(e.target);if (!$target.filter('.hint').length&&!$target.filter('.hintclickicon').length) {$field_hint.dialog('关闭');}});//将对话框元素附加到 .hint 元素$('.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('打开');});//使用引用表单元素的锚标记触发 .hint 对话框$('.hintclickicon').click(function(e) {e.preventDefault();$($(this).get(0).hash + '.hint').trigger('click');});});
让你做:
$field_hint.bind('clickoutside',function(){$field_hint.dialog('关闭');});
I have a jQuery UI Dialog that gets displayed when specific elements are clicked. I would like to close the dialog if a click occurs anywhere other than on those triggering elements or the dialog itself.
Here's the code for opening the dialog:
$(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');
});*/
});
If I uncomment the last part, the dialog never opens. I assume it's because the same click that opens the dialog is closing it again.
Final Working Code
Note: This is using the jQuery outside events plugin
$(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');
});
});
Check out the jQuery Outside Events plugin
Lets you do:
$field_hint.bind('clickoutside',function(){
$field_hint.dialog('close');
});
这篇关于jQuery UI - 在外部单击时关闭对话框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!