jquery-ui-dialog - 如何钩入对话框关闭事件

Question

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

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

是否有一种方法可以捕获来自对话框的关闭事件？

我知道可以在单击关闭按钮时运行代码，但这并不能涵盖用户使用 Escape 键或右上角的 X 关闭的情况。

- Brownie

Answer 1

我已经找到了它！

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

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

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

- Brownie

---

$('div#popup_content').bind('dialogclose', function(event)) { ... } 这段代码中有一个拼写错误（typo）。应将其更正为： $('div#popup_content').bind('dialogclose', function(event) { ... }); 这将绑定一个事件处理程序函数，在弹出对话框关闭时执行。 - CFNinja

这很有帮助，但是 $('div#popup_content') 是正确的吗？考虑到我的对话框是这样打开的 jQuery.fn.dialog.open({})，我应该用什么来替换它呢？ - Jake N

应该更新为使用on()而不是现在已经过时的bind()。 - RBZ

请记住，如果页面上以前从未打开过jQuery UI对话框，则遮罩层div将不存在于DOM中。 因此，您可以考虑改用以下方式：$('body').on('dialogclose', '.ui-dialog', function(){...}); - thdoan

如果对其他人有用的话，当使用 X 按钮或按 Esc 键关闭时，事件将具有一个 eventPhase 属性。但是，如果您通过编程方式关闭（例如 $(...).dialog('close')），它将不存在。这是一种区分的方式。 - jinglesthula

Answer 2

我相信在创建对话框时，您也可以这样做（摘自我做过的一个项目）：

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

- Darryl Hein

---

我认为这个答案似乎比被采纳的答案更正确。此外，可以在这里找到正确的API文档：http://api.jqueryui.com/dialog/#event-close - Chris Gillum

Jake N - 你需要实际编写一个名为“CloseFunction”的函数，以便对话框可以访问它才能使其工作。例如，在上面你可以编写：var CloseFunction = function() { //在这里执行你的自定义关闭操作 }; - Adam Diament

这是一个选项，但有时代码被用于不同的地方。所选答案适用于当您想在不同的上下文中添加不同的行为并重用对话框创建代码以获得标准化时。 - Russell Ormes

你使用了两次 overlay，这并不必要，对吧？ - radbyx

这个方法是有效的，而且在这里绝对是必要和有用的答案，但它也会在任何方式关闭对话框时运行CloseFunction代码，而不仅仅是在使用X或其他方式关闭时。因此，如果您想在使用X或取消按钮关闭对话框时运行某些代码，但不想在通过其他方式关闭时运行（例如，在我的情况下，当提交的输入被验证为正确时），那么这种方法就不适用了。 - Michael K

Answer 3

$("#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');
    }
});

- Mo Ming C

Answer 4

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

"close" 属性为对话框提供关闭事件。

- Taksh

Answer 5

你也可以尝试这个

$("#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");
                }
            }
        });

- Umair Noor

Answer 6

以下是对我有效的解决方案...

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

- morttan

Answer 7

自 jQuery 1.7 版本以来，.on() 方法是将事件处理程序附加到文档的首选方法。

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

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

- Disper

---

OP的回答基本上是相同的。 - reggaeguitar

@reggaeguitar 是正确的。OP在2015年更新了on()的答案 :) - Disper

如果你修改了答案，我会把我的踩变成赞。在你的回答之后，我不知道他们是否进行了更新。 - reggaeguitar

Answer 8

添加类似于示例下方的选项“close”，并执行内联函数。

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

- Mehdi Roostaeian

Answer 9

如果我理解你所说的窗口类型，那么对于弹出窗口， $(window).unload() 会给你所需的钩子吗？

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

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

也许更有用的是告诉您如何快速找到它。在显示对话框时，只需打开FireBug并检查可以关闭窗口的元素。您将立即看到它们的定义方式，并提供您需要注册单击处理程序的内容。

因此，直接回答您的问题，我认为答案实际上是“否”-没有可以挂钩的关闭事件，但是“是”-您可以相当轻松地挂钩关闭对话框的所有方法并获得所需的结果。

- andy

---

嗨，安迪。我正在使用通过CSS和JavaScript创建的jQuery-UI对话框。从查看代码来看，我认为其中有一个钩子可以用于我，但我不知道如何访问它。 - Brownie

Answer 10

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

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

- Alexei

---

只需使用 .on() -- 而不是 .live() 或 .bind()。 - cssyphus