Question

我的许多页面都有对话框，在单击背景（或叠加层）时应该关闭 - 即在对话框外单击时。我正在使用此代码执行此操作

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

来自jQuery-UI close modal dialog on background click。

上面的代码在母版页上，除了一个我尝试过的每个对话框都可以正常工作。通过从页面上的控件的onclick事件调用以下函数（或非常类似的函数）来打开正确关闭的（即单击背景时）。

function LoadPopupWindowFixedWidthAndModal(path, width) {
    $("#DivPopup").dialog({ title: "Tip", width: width }).load(path);
}

不关闭的对话框位于母版页上的用户控件内，并使用此代码进入对话框

$(function () {
    $("#divFindResult").dialog({
        autoOpen: false,
        modal: false,
        resizable: false,
        width: 600,
        position: { my: "right top", at: "right bottom+6px", of: "#FindPopupPos" },
        open: function (type, data) { $(this).parent().appendTo("form:first"); }
    });
});

此对话框与查找框相关联，实际上是通过使用此代码

单击查找框来打开的

<asp:TextBox runat="server" ID="TextFind" Width="100" style="position:relative; z-index:100;" onclick="$('#divFindResult').dialog('open'); this.focus();" />

当我点击查找框时，会出现正确的对话框，但只能通过单击它自己的关闭框来关闭它。单击背景不起作用。但是，打开此对话框后，我可以打开其他对话框，然后单击背景，它们都将关闭。

我尝试过的一些事情：

添加＆＃39; open：function（type，data）{$（this）.parent（）。appendTo（＆＃34; form：first＆＃34;）; }＆＃39;因为对话框在表单之外。这个想法来自这里：http://www.worldwidewhat.net/2011/06/fixing-asp-net-control-events-in-jquery-ui-dialog。
keep jqueryui overlay in same DOM position
jquery UI Modal Dialog in asp.net usercontrol: Modal Overlay only on Div in UserControl
我看了jQuery UI - Close Dialog When Clicked Outside，但认为它无济于事。
还审查了其他一些文章。

我无法弄清楚这两种情况之间的差异是否相关，尽管我通过测试不同的代码调整而拒绝了许多理论。

关于＆＃34;关闭＆＃34;的一个区别。是对话框的内容由服务器端代码填充。这可能是相关的，但目前我不知道如何。

另一个区别是文本框中的事件打开了。我再也看不出它是如何相关的，而且它是一个很好地为我们服务的重要特征。（所有这一切都是因为我将旧的AjaxToolKit代码转换为jQuery，所以我们可以保持一致。改变行为并不总是一种选择。）

另一个区别在于用户控件和母版页。这有关系。

它还有一些不同的参数，不使用load（）函数，并通过其创建的单独调用打开，＆＃34;如果那是正确的话。如你所见，我正在抓稻草。

有人可以告诉正确的稻草或树枝或树干，我将非常感激。先感谢您。吉姆

Answer 1

.ui-widget-overlay上的点击事件无效，因为DOM中没有.ui-widget-overlay。

这是因为您指定了modal: false。 .ui-widget-overlay仅在modal: true时才会发挥作用。也就是说，叠加div用于模态对话框。

Answer 2

可能有2个叠加层 - 检查打开非工作对话框时出现的叠加层类。

打开另一个工作对话框，将.ui-widget-overlay叠加到顶部，然后点击一下就会关闭。

对话框无法在背景/叠加层上关闭

2 个答案: