Question

我有一个模态对话框。我想通过在对话框窗口外单击来关闭它。

这里和Google上有许多答案建议在jQuery对话框函数中执行此操作：

open: function(event,ui) {
                    $('.ui-widget-overlay').on('click', function(event,ui) {
                        alert("closing");        
                        $("#dialog-message").dialog("close");
                    });
                }

然而，这对我来说只能工作一次。如果我再次打开一个对话框，我的警报会消失，但对话框不再关闭。

我能够通过将此问题放在脚本的开头解决所有对话框来解决问题：

$('body').on('click','.ui-widget-overlay', function() {
    $('.ui-dialog').filter(function () {
    return $(this).css("display") === "block";
    }).find('.ui-dialog-content').dialog('close');
    });

但是，我想深究这一点并理解为什么每个人的答案似乎对他们有效，但对我不起作用。我在jsFiddle中看过一些工作得很好的例子，似乎执行完全相同的代码。

解决方案：

我的错误在于当我进行对话时（＆＃34;关闭＆＃34;）我销毁对话框然后必须创建一个新对话框。当然，在房地产对话框中（＆＃34;关闭＆＃34;）只隐藏对话框。因此，我不断向DOM添加具有相同id的div。这显然造成了问题。

解决方法是添加div一次，创建一次对话框函数，make autoOpen：false然后只需在对话框中使用对话框（＆＃34;打开＆＃34;）调用对话框。通过使用，例如html（）修改对话框div的内容，可以轻松修改对话框窗口的内容。

jQuery UI - 关闭多次运行的模式对话框的方法

0 个答案: