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,

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

});

以上是 jQuery UI-在外部单击时关闭对话框 的全部内容, 来源链接: utcz.com/qa/405621.html

回到顶部