jquery-ui-dialog -如何连接到对话框关闭事件。

I am using the jquery-ui-dialog plugin

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

I am looking for way to refresh the page when in some circumstances when the dialog is closed.

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

Is there a way to capture a close event from the dialog?

是否有方法从对话框中捕获一个关闭事件?

I know I can run code when the close button is clicked but that doesn't cover the user closing with escape or the x in the top right corner.

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

10 个解决方案

#1

229

I have found it!

我发现它!

You can catch the close event using the following code:

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

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

Obviously I can replace the alert with whatever I need to do.
Edit: As of Jquery 1.7, the bind() has become on()

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

#2

172

I believe you can also do it while creating the dialog (copied from a project I did):

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

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

Note close: CloseFunction

注意关闭:CloseFunction

#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');
}**
});

#4

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

"close" property of dialog gives the close event for the same.

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

#5

U can also try this

你也可以试试这个

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

#6

This is what worked for me...

这就是我的工作…

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

#7

As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.

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

Because no one actually created an answer with using .on() instead of bind() i decided to create one.

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

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

#8

If I'm understanding the type of window you're talking about, wouldn't $(window).unload() (for the dialog window) give you the hook you need?

如果我理解了您所谈论的窗口的类型，那么$(window).unload()(用于对话框窗口)难道不会给您带来您需要的钩子吗?

(And if I misunderstood, and you're talking about a dialog box made via CSS rather than a pop-up browser window, then all the ways of closing that window are elements you could register click handers for.)

(如果我理解错了，你说的是通过CSS而不是弹出式浏览器窗口生成的对话框，那么关闭该窗口的所有方法都是可以注册为click handers的元素。)

Edit: Ah, I see now you're talking about jquery-ui dialogs, which are made via CSS. You can hook the X which closes the window by registering a click handler for the element with the class ui-dialog-titlebar-close.

编辑:啊，我明白你说的是jquery-ui对话框，它是通过CSS制作的。通过为元素注册一个单击处理程序，您可以将关闭窗口的X与class ui-dialog-titlebar-close关联起来。

More useful, perhaps, is you tell you how to figure that out quickly. While displaying the dialog, just pop open FireBug and Inspect the elements that can close the window. You'll instantly see how they are defined and that gives you what you need to register the click handlers.

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

So to directly answer your question, I believe the answer is really "no" -- there's isn't a close event you can hook, but "yes" -- you can hook all the ways to close the dialog box fairly easily and get what you want.

因此，为了直接回答你的问题，我认为答案是“不”——这里没有可以挂起的很近的事件，而是“是”——你可以用各种方法轻松地关闭对话框，得到你想要的。

#9

add option 'close' like under sample and do what you want inline function

在示例中添加“close”选项，并执行您想要的内联函数。

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

#10

You may try the following code for capturing the closing event for any item : page, dialog etc.

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

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

#1

229