提问人:Brownie 提问时间:10/5/2008 最后编辑:Rahul GuptaBrownie 更新时间:12/12/2019 访问量:282900
jquery-ui-dialog - 如何挂接到对话框关闭事件
jquery-ui-dialog - How to hook into dialog close event
问:
我正在使用jquery-ui-dialog
插件
我正在寻找在某些情况下关闭对话框时刷新页面的方法。
有没有办法从对话框中捕获关闭事件?
我知道当单击关闭按钮时我可以运行代码,但这不包括用户使用转义或右上角的 x 关闭。
答:
如果我理解你所说的窗口类型,$(window).unload() (用于对话框窗口)不会给你你需要的钩子吗?
(如果我误解了,你说的是通过CSS而不是弹出的浏览器窗口制作的对话框,那么关闭该窗口的所有方法都是你可以注册点击处理程序的元素。
编辑:啊,我现在看到你说的是jquery-ui对话框,它是通过CSS制作的。您可以通过使用 ui-dialog-titlebar-close 类注册元素的单击处理程序来挂钩关闭窗口的 X。
也许更有用的是,你告诉你如何快速弄清楚这一点。显示对话框时,只需弹出打开 FireBug 并检查可以关闭窗口的元素即可。您将立即看到它们是如何定义的,这为您提供了注册单击处理程序所需的内容。
所以要直接回答你的问题,我相信答案真的是“否”——没有一个你可以钩住的关闭事件,但“是”——你可以钩住所有的方法,相当容易地关闭对话框并得到你想要的东西。
评论
我找到了!
您可以使用以下代码捕获关闭事件:
$('div#popup_content').on('dialogclose', function(event) {
alert('closed');
});
显然,我可以用我需要做的任何事情来替换警报。
编辑:从 Jquery 1.7 开始,bind() 已变为 on()
评论
$('div#popup_content')
jQuery.fn.dialog.open({})
$('body').on('dialogclose', '.ui-dialog', function(){...});
我相信您也可以在创建对话框时执行此操作(从我做的一个项目中复制):
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
评论
var CloseFunction = function() { //Do your custom closing stuff here };
overlay
$("#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
}
评论