192

我正在使用jquery-ui-dialog插件

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

有没有办法从对话框中捕获关闭事件？

我知道我可以在单击关闭按钮时运行代码，但这不包括用户使用转义或右上角的 x 关闭。

4

10 回答 10

253

我找到了！

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

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

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

于 2008-10-05T13:42:54.967 回答
201

我相信您也可以在创建对话框时执行此操作（从我所做的项目中复制）：

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

于 2008-10-05T19:35:17.393 回答
32 
$("#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');
    }
});
于 2009-11-10T08:06:13.043 回答
22 
$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

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

于 2014-07-17T08:43:59.880 回答
16

你也可以试试这个

$("#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");
                }
            }
        });
于 2012-06-20T09:45:16.223 回答
10

这对我有用...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});
于 2011-07-19T17:59:36.337 回答
8

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

因为没有人真正使用 using 创建答案。on()而不是bind()我决定创建一个。

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});
于 2014-11-10T08:07:26.410 回答
6

在示例下添加选项“关闭”并执行您想要的内联函数

close: function(e){
    //do something
}
于 2016-11-24T10:57:37.047 回答
4

如果我了解您正在谈论的窗口类型，$(window).unload()（对于对话框窗口）不会给您所需的钩子吗？

（如果我误解了，并且您说的是通过 CSS 制作的对话框而不是弹出式浏览器窗口，那么关闭该窗口的所有方式都是您可以注册点击处理程序的元素。）

编辑：啊，我现在看到你在谈论 jquery-ui 对话框，它是通过 CSS 制作的。您可以通过使用类ui-dialog-titlebar-close为元素注册一个单击处理程序来挂钩关闭窗口的 X。

也许更有用的是你告诉你如何快速解决这个问题。在显示对话框时，只需弹出打开 FireBug 并检查可以关闭窗口的元素。您将立即看到它们是如何定义的，并为您提供了注册点击处理程序所需的内容。

因此，要直接回答您的问题，我相信答案确实是“否”-没有可以挂钩的关闭事件，但是“是”-您可以很容易地挂钩所有关闭对话框并获得你想要什么。

于 2008-10-05T13:12:27.370 回答
2

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

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});
于 2011-06-16T11:56:27.567 回答