Tôi có Hộp thoại giao diện người dùng jQuery được hiển thị khi các phần tử cụ thể được nhấp vào. Tôi muốn đóng hộp thoại nếu nhấp chuột xảy ra ở bất kỳ nơi nào khác ngoài các phần tử kích hoạt đó hoặc chính hộp thoại.
Đây là mã để mở hộp thoại:
$(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');
});*/
});
Nếu tôi bỏ ghi chú phần cuối cùng, hộp thoại sẽ không bao giờ mở. Tôi cho rằng đó là vì cùng một cú nhấp chuột mở hộp thoại đang đóng hộp thoại lại.
Lưu ý mã làm việc cuối cùng
: Đây là sử dụng plugin jQuery bên ngoài sự kiện
$(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');
});
});