如何挂接到对话关闭事件

我使用的是 jquery-ui-dialog插件

在某些情况下，当对话框关闭时，我正在寻找刷新页面的方法。

有没有办法从对话框中捕捉到结束事件？

我知道我可以运行代码时，关闭按钮被点击，但这并不涵盖用户关闭与逸出或在右上角的 x。

277064 次浏览
小开

如果我理解了您所说的窗口类型，那么 $(窗口) . unload ()(对于对话框窗口)不会给您提供所需的钩子吗？

(如果我误解了，你说的是一个通过 CSS 而不是弹出式浏览器窗口制作的对话框，那么关闭该窗口的方法就是 所有元素，你可以注册点击操作器。)

编辑: 啊，我明白您现在谈论的是 jquery-ui 对话框，它是通过 CSS 制作的。您可以通过使用类 Ui 对话框-标题栏-关闭为元素注册一个单击处理程序来钩住关闭窗口的 X。

更有用的，也许是你告诉你如何快速找出答案。在显示对话框时，只需弹出 FireBug 和 检查这些可以关闭窗口的元素。您将立即看到它们是如何定义的，这将为您提供注册单击处理程序所需的内容。

所以，直接回答你的问题，我相信答案是“不”——没有一个关闭的事件你可以钩住，但是“是”——你可以钩住所有的方式关闭对话框相当容易，并得到你想要的。

小开
最佳答案

我找到了！

您可以使用以下代码捕获关闭事件:

 $('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});

显然，我可以用我需要做的任何事情来替换警报。
编辑: 从 Jquery 1.7开始，bind ()变成了 on ()

小开

我相信你也可以在创建对话框时这样做(从我做的一个项目中复制) :

dialog = $('#dialog').dialog({
modal: true,
autoOpen: false,
width: 700,
height: 500,
minWidth: 700,
minHeight: 500,
position: ["center", 200],
close: CloseFunction,
overlay: {
opacity: 0.5,
background: "black"
}
});

注 close: CloseFunction

小开 
$("#dialog").dialog({
autoOpen: false,
resizable: false,
width: 400,
height: 140,
modal: true,
buttons: {
"SUBMIT": function() {
$("form").submit();
},
"CANCEL": function() {
$(this).dialog("close");
}
},
close: function() {
alert('close');
}
});
小开

您可以尝试以下代码来捕获任何项目的结束事件: 页面、对话框等。

$("#dialog").live('pagehide', function(event, ui) {
$(this).hide();
});
小开

我就是这么做的。

$('#dialog').live("dialogclose", function(){
//code to run on dialog close
});
小开

你也可以试试这个

$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
小开 
$( "#dialogueForm" ).dialog({
autoOpen: false,
height: "auto",
width: "auto",
modal: true,
my: "center",
at: "center",
of: window,
close : function(){
// functionality goes here
}
});

对话框的“ close”属性给出相同的关闭事件。

小开

在 jQuery 1.7中，. on ()方法是将事件处理程序附加到文档的首选方法。

因为实际上没有人使用.on()而不是 bind()创建一个答案，我决定创建一个。

$('div#dialog').on('dialogclose', function(event) {
//custom logic fired after dialog is closed.
});
小开

添加“关闭”选项，如下示例，并做你想要的内联函数

close: function(e){
//do something
}

提交答案