gpt4 book ai didi

javascript - jQuery UI - 在外部单击时关闭对话框

转载 作者:IT王子 更新时间:2023-10-29 02:40:28 24 4
gpt4 key购买 nike

我有一个 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 outside events插件

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

最佳答案

很抱歉过了这么久才把它拖上来,但我用了下面的。有什么缺点吗?查看打开函数...

$("#popup").dialog(
{
height: 670,
width: 680,
modal: true,
autoOpen: false,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui)
{
$('.ui-widget-overlay').bind('click', function()
{
$("#popup").dialog('close');
});
}
});

关于javascript - jQuery UI - 在外部单击时关闭对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2554779/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com