Question

我正在使用jQuery 1.6和jQuery UI。我成功实现了一个modal dialog窗口，其宽度几乎是我的应用程序网页宽度的50％。我想给用户另一种关闭对话框的方式，这样当他点击“模态框”在页面上覆盖的区域之外时，这个将被关闭，就好像用户点击了右上角的“标准”“x”按钮。

我该怎么做？

Answer 1

<强>更新

这是最初的答案：

$(".ui-widget-overlay").click (function () {
     $("#your-dialog-id").dialog( "close" );
});

这是可行的解决方案：

$('.ui-widget-overlay').live('click', function() {
     $('#your-dialog-id').dialog( "close" );
});

Answer 2

为了澄清，如果对话框设置为autoOpen: true，对话框的默认值和您不再打开对话框，则Victor的答案才有效/ strong>有一个事件。如果您在click设置为autoOpen或true的任何时候打开包含false之类事件的对话框，则必须使用jQuery.live。< / p>

使用click表示覆盖autoOpen: false事件失败的小提示：http://jsfiddle.net/GKfZM/

演示live与autoOpen: false和click事件的合作方式：http://jsfiddle.net/GKfZM/1/

摘要： Victor的回答仅适用于某些条件。

Tutorial link

Answer 3

这种方式怎么样，这样你可以关闭对话框，无论它从哪里打开，哪个id。这是一个全球性的功能：

   $("body").on("click",".ui-widget-overlay",function() {
     $(".ui-dialog-titlebar-close").click();
   });

Answer 4

关闭模型对话框有两个选项

$('#your-dialog-id').modal('toggle');

OR

点击外框

后，您可以直接使用点击事件

$("#your-dialog-id .close").click()

如何通过单击框所覆盖的区域外单击关闭jQuery UI模式对话框？

4 个答案: