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


Answers:


248

我找到了!

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

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

显然,我可以将警报替换为需要执行的任何操作。
编辑:从jQuery 1.7开始,bind()已成为on()


3
错字:$('div#popup_content')。bind('dialogclose',function(event)){...}
CFNinja

1
这很有帮助,$('div#popup_content')对吗?考虑到我的对话框是这样打开的,我应该用它代替什么jQuery.fn.dialog.open({})
Jake N

我看到对话框首先关闭,然后出现警报,如果每个人的情况都一样,有人可以帮助我让警报先出现,然后单击“确定”,然后关闭窗口吗?指正....
changeme

5
应该更新它以使用on()而不是现在已经过时的bind()。
RBZ 2014年

2
请记住,如果以前从未在页面上打开过jQuery UI对话框,则DOM中将不存在overlay div。因此,您可以考虑改为执行以下操作:$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan 2015年

192

我相信您也可以在创建对话框时完成此操作(从我做过的项目中复制):

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


9
对我来说,这个答案似乎比接受的答案更正确。另外,可以在这里找到正确的API文档:api.jqueryui.com/dialog/#event-close
克里斯·

2
杰克N-实际上,您需要编写一个名为“ CloseFunction”的对话框可访问的函数,才能正常工作,例如,您可以编写上方的代码 var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament 2014年

这是一个选项,但是有时代码会在不同的地方使用。当您想要在不同的上下文中添加不同的行为并重用对话框创建代码以实现标准化时,所选答案适用。
NectarSoft 2014年

你有overlay两次。那不是必需品吗?
radbyx

1
这行之有效,在这里绝对是一个需要且有用的答案,但是它无论何时以任何方式关闭对话框都可以运行CloseFunction代码,而不仅仅是用X或其他方式关闭时。因此,如果您想在使用X或“取消”按钮关闭对话框时运行某些代码,而不是在由于其他原因而关闭对话框时(例如在我的情况下,已验证提交的输入正确时)运行某些代码,则不会工作。
mikato

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

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

对话框的“关闭”属性提供相同的关闭事件。


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

10

这就是对我有用的...

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

8

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

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

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

6

在样本下添加选项“ close”,然后执行所需的内联函数

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

4

如果我了解您所谈论的窗口类型,则不会使用$ {window).unload()(用于对话框窗口)是否不会为您提供所需的钩子?

(如果我误解了,而您正在谈论的是通过CSS而不是弹出式浏览器窗口创建的对话框,那么关闭该窗口的所有方式都是您可以为其注册点击处理程序的元素。)

编辑:啊,我知道您现在正在谈论通过CSS制作的jquery-ui对话框。您可以通过使用ui-dialog-titlebar-close类为元素注册点击处理程序来挂钩X,以关闭窗口

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

因此,要直接回答您的问题,我相信答案确实是“否”-您没有可以关闭的关闭事件,但是是“是”-您可以通过各种方式轻松地关闭对话框并获得你想要什么。


嘿,安迪。我正在通过css和javascript从jquery-ui弹出对话框。通过查看代码,我认为其中有一个钩子,但我不知道该怎么做。
布朗尼

2

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

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

1
只需使用.on()-代替.live()或.bind()
cssyphus 2013年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.