jQuery UI对话框：单击“外部”时关闭

我有一个jQuery UI对话框。 我尝试实现“$（’。ui-widget-overlay’）。bind（’click’….”方法，建议在用户点击外部时关闭对话框。但是，它不起作用我的代码。我做错了什么？

$('input[name="delete-image"]').click(function(e){ e.preventDefault(); $("div.deleteImageDialog").dialog({ resizable: false, modal: true, buttons: { "OK": function(e) { e.preventDefault(); $.ajax({ url: $('form.addEdit').attr('action'), type: $('form.addEdit').attr('method'), data: $('form.addEdit').serialize(), open: function(){ $('.ui-widget-overlay').bind('click', function(){ $('div.deleteImageDialog').dialog('close'); }) }, success: function(html) { } }); $(this).dialog('close'); }, "Cancel": function() { $(this).dialog('close'); } } }); }); 

Answer 1

然后，您必须将事件绑定到叠加层。

 $('input[name="delete-image"]').click(function(e){ e.preventDefault(); $("div.deleteImageDialog").dialog({ // your code... "Cancel": function() { $(this).dialog('close'); } } }); $('.overlay_sector').bind( 'click', function() { $("div.deleteImageDialog").dialog('close'); $('.overlay_sector').unbind(); } ) }); 

Answer 2

我有类似的问题。 基于这个线程的答案，我们使用了一个更简单的代码解决方案：

当用户在其外部单击时，使用jQuery隐藏DIV

  $(document).mouseup(function (e) { var myDialog = $("#dialog-confirm"); var container = $(".ui-dialog"); if (myDialog.dialog( "isOpen" )===true) { if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { myDialog.dialog( "close" ); } } });