我有一个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');
});
});
答案 0 :(得分：154)
很抱歉在这么久之后拖了它，但是我使用了下面的内容。有什么缺点？查看开放功能...
$("#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');
});
}
});
答案 1 :(得分：77)
忘记使用其他插件：
以下是在单击popin外部时关闭jquery UI对话框的3种方法：
如果对话框是模态/具有背景叠加：http://jsfiddle.net/jasonday/6FGqN/
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 100,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});
如果对话是非模态的方法1：方法1：http://jsfiddle.net/jasonday/xpkFf/
// Close Pop-in If the user clicks anywhere else on the page
jQuery('body')
.bind(
'click',
function(e){
if(
jQuery('#dialog').dialog('isOpen')
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
jQuery('#dialog').dialog('close');
}
}
);
非模态对话框方法2：http://jsfiddle.net/jasonday/eccKr/
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
minHeight: 100,
width: 342,
draggable: true,
resizable: false,
modal: false,
closeText: 'Close',
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
}
});
$('#linkID').click(function() {
$('#dialog').dialog('open');
closedialog = 0;
});
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#dialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
});
答案 2 :(得分：30)
查看jQuery Outside Events plugin
让你这样做：
$field_hint.bind('clickoutside',function(){
$field_hint.dialog('close');
});
答案 3 :(得分：16)
只需添加此全局脚本即可关闭所有模式对话框，只需单击外部即可。
$(document).ready(function()
{
$(document.body).on("click", ".ui-widget-overlay", function()
{
$.each($(".ui-dialog"), function()
{
var $dialog;
$dialog = $(this).children(".ui-dialog-content");
if($dialog.dialog("option", "modal"))
{
$dialog.dialog("close");
}
});
});;
});
答案 4 :(得分：10)
$(".ui-widget-overlay").click (function () {
$("#dialog-id").dialog( "close" );
});
Fiddle显示上述代码。
答案 5 :(得分：8)
我必须做两部分。首先是外部点击处理程序：
$(document).on('click', function(e){
if ($(".ui-dialog").length) {
if (!$(e.target).parents().filter('.ui-dialog').length) {
$('.ui-dialog-content').dialog('close');
}
}
});
这会在通用dialog('close')类上调用ui-dialog-content，因此如果点击不是来自一个，则会关闭所有对话框。它也适用于模态对话框，因为叠加层不是.ui-dialog框的一部分。
问题是：
要解决此问题，我必须将stopPropagation添加到这些点击处理程序：
moreLink.on('click', function (e) {
listBox.dialog();
e.stopPropagation(); //Don't trigger the outside click handler
});
答案 6 :(得分：5)
这个问题有点旧，但是如果有人想要在用户点击某个位置时关闭非模态对话框，可以使用我从JQuery UI Multiselect plugin获取的对话框。主要优点是点击不会“丢失”（如果用户想要点击链接或按钮，则操作完成）。
$myselector.dialog({
title: "Dialog that closes when user clicks outside",
modal:false,
close: function(){
$(document).off('mousedown.mydialog');
},
open: function(event, ui) {
var $dialog = $(this).dialog('widget');
$(document).on('mousedown.mydialog', function(e) {
// Close when user clicks elsewhere
if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
$myselector.dialog('close');
}
});
}
});
答案 7 :(得分：5)
您可以在不使用任何其他插件的情况下执行此操作
var $dialog= $(document.createElement("div")).appendTo(document.body);
var dialogOverlay;
$dialog.dialog({
title: "Your title",
modal: true,
resizable: true,
draggable: false,
autoOpen: false,
width: "auto",
show: "fade",
hide: "fade",
open:function(){
$dialog.dialog('widget').animate({
width: "+=300",
left: "-=150"
});
//get the last overlay in the dom
$dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
$dialogOverlay.unbind();
$dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
$dialog.dialog("close");
});
}
});
这里$ dialog是对话框。 我们基本上做的是在打开此对话框时获取最后一个叠加小部件，并将单击处理程序绑定到该叠加层以在任何时候单击叠加层时关闭$对话框。
答案 8 :(得分：5)
不需要外部事件插件......
只需向.ui-widget-overlay div添加一个事件处理程序：
jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
jQuery("#ui-dialog-selector-goes-here").dialog("close");
return false;
});
只要确保你用于jQuery ui对话框的任何选择器也被调用来关闭它..即 #ui-dialog-selector-goes-here
答案 9 :(得分：3)
这不使用jQuery UI，但确实使用jQuery，并且可能对那些因任何原因不使用jQuery UI的人有用。这样做：
function showDialog(){
$('#dialog').show();
$('*').on('click',function(e){
$('#zoomer').hide();
});
}
$(document).ready(function(){
showDialog();
});
因此，一旦我显示了一个对话框，我就添加了一个单击处理程序，它只查找任何内容的第一次单击。
现在，如果我可以忽略对#dialog及其内容上的任何内容的点击，那会更好，但是当我尝试用$（'：not（## dialog，＃dialog）切换$（'*'）时*“）'），它仍然检测到#dialog点击。
无论如何，我只是将它用于照相灯箱，所以它可以用于此目的。
答案 10 :(得分：2)
给定的示例使用一个带有id＆＃39;＃dialog＆＃39;的对话框，我需要一个关闭任何对话框的解决方案：
$.extend($.ui.dialog.prototype.options, {
modal: true,
open: function(object) {
jQuery('.ui-widget-overlay').bind('click', function() {
var id = jQuery(object.target).attr('id');
jQuery('#'+id).dialog('close');
})
}
});
感谢我的同事Youri Arkesteijn建议使用原型。
答案 11 :(得分：1)
对于那些您感兴趣的人，我创建了一个通用插件，无论是模态对话还是非模态对话，都可以在点击对话框时关闭对话框。它支持同一页面上的一个或多个对话框。
此处提供更多信息：http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
劳伦
答案 12 :(得分：1)
我使用此解决方案基于此处发布的一个：
var g_divOpenDialog = null;
function _openDlg(l_d) {
// http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
jQuery('body').bind(
'click',
function(e){
if(
g_divOpenDialog!=null
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
_closeDlg();
}
}
);
setTimeout(function() {
g_divOpenDialog = l_d;
g_divOpenDialog.dialog();
}, 500);
}
function _closeDlg() {
jQuery('body').unbind('click');
g_divOpenDialog.dialog('close');
g_divOpenDialog.dialog('destroy');
g_divOpenDialog = null;
}
答案 13 :(得分：1)
我在一个页面上制作预览模式时遇到了同样的问题。经过大量的谷歌搜索后，我发现了这个非常有用的解决方案。对于事件和目标，它会检查点击发生的位置，并根据它触发操作或不执行任何操作。
$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content'))
return;
} else {
$('#modal-background').hide();
}
});
答案 14 :(得分：1)
对于我的非模式对话框，这是唯一有效的方法
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('#dlg').dialog("close");
}
});
答案 15 :(得分：0)
实际上你很简单，你不需要任何插件，只需jquery，或者你可以用简单的javascript来完成。
$('#dialog').on('click', function(e){
e.stopPropagation();
});
$(document.body).on('click', function(e){
master.hide();
});
答案 16 :(得分：0)
我不认为从整个DOM中使用$（＆＃39; .any-selector＆＃39;）查找对话框的内容非常明亮。
尝试
$('<div />').dialog({
open: function(event, ui){
var ins = $(this).dialog('instance');
var overlay = ins.overlay;
overlay.off('click').on('click', {$dialog: $(this)}, function(event){
event.data.$dialog.dialog('close');
});
}
});
你真的从它所属的对话框实例中获取了叠加层，这样的事情永远不会出错。
答案 17 :(得分：0)
使用以下代码，您可以模拟对话框的“关闭”按钮上的单击（更改字符串'MY_DIALOG'作为您自己对话框的名称）
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();
答案 18 :(得分：0)
智能代码： 我正在使用以下代码，以便使所有内容保持清晰可读。 车身外侧将关闭对话框。
$(document).ready(function () {
$('body').on('click', '.ui-widget-overlay', closeDialogBox);
});
function closeDialogBox() {
$('#dialog-message').dialog('close');
}
答案 19 :(得分：0)
我最终使用了这段代码，该代码应该可以在页面上的所有打开的对话框中使用，而忽略了对工具提示的单击，并且还清除了要关闭的对话框的资源。
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip') || clicked.parents().is('.ui-dialog-content, .ui-dialog-titlebar, .ui-tooltip')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('.ui-dialog-content').dialog("close");
$('.ui-dialog-content').dialog("destroy");
$('.ui-dialog-content').detach();
}
});
答案 20 :(得分：0)
我碰巧需要在没有元素点击的情况下关闭.dialog。我的页面上有很多信息对话框，因此我需要一些东西来处理它们。这是我的处理方式：
$(document).ready(function () {
$(window).click(function (e) {
$(".dialogGroup").each(function () {
$(this).dialog('close');
})
});
$("#lostEffClick").click(function () {
event.stopPropagation();
$("#lostEffDialog").dialog("open");
};
});