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

jquery-ui-dialog - How to hook into dialog close event

提问人:Brownie 提问时间:10/5/2008 最后编辑:Rahul GuptaBrownie 更新时间:12/12/2019 访问量:282900

问:

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

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

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

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

javascript 模态对话框 jquery-ui-dialog

评论


答:

4赞 andy 10/5/2008 #1

如果我理解你所说的窗口类型,$(window).unload() (用于对话框窗口)不会给你你需要的钩子吗?

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

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

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

所以要直接回答你的问题,我相信答案真的是“否”——没有一个你可以钩住的关闭事件,但“是”——你可以钩住所有的方法,相当容易地关闭对话框并得到你想要的东西。

评论

0赞 Brownie 10/5/2008
嘿安迪。我逗乐了通过 css 和 javascript 制作的 jquery-ui 对话框。从代码来看,我认为那里有一个钩子,但我不知道如何实现它。
255赞 Brownie 10/5/2008 #2

我找到了!

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

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

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

评论

3赞 CFNinja 3/26/2010
错别字: $('div#popup_content').bind('dialogclose', function(event)) { ... }
1赞 Jake N 10/18/2011
这很有帮助,但对吗?我应该用什么来替换它,记住我的对话框是这样打开的$('div#popup_content')jQuery.fn.dialog.open({})
0赞 changeme 7/11/2012
我看到对话框先关闭,然后出现警报,如果每个人都是同样的情况,有人可以帮助我,以便先出现警报,然后单击“确定”然后关闭窗口吗?纠正我....
5赞 RBZ 3/21/2014
这应该更新为使用 on() 而不是 bind(),后者现在已经过时了。
2赞 thdoan 10/16/2015
请记住,如果以前从未在页面上打开过 jQuery UI 对话框,则 DOM 中将不存在覆盖 div。 因此,您可以考虑执行以下操作:$('body').on('dialogclose', '.ui-dialog', function(){...});
203赞 Darryl Hein 10/6/2008 #3

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

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

评论

11赞 Chris Gillum 8/16/2013
在我看来,这个答案比公认的答案更正确。此外,可以在此处找到正确的 API 文档:api.jqueryui.com/dialog/#event-close
2赞 Adam Diament 7/25/2014
Jake N - 您需要实际编写一个名为“CloseFunction”的对话框可访问的函数才能使其工作,例如,在上面您可以编写var CloseFunction = function() { //Do your custom closing stuff here };
0赞 Russell Ormes 9/27/2014
这是一个选项,但有时代码在不同的地方使用。当您希望在不同的上下文中添加不同的行为并重用对话框创建代码以实现标准化时,所选答案适用。
0赞 radbyx 10/28/2015
你有两次。那不是很正常吧?overlay
1赞 Michael K 9/15/2016
这在这里有效并且绝对是一个必要且有用的答案,但它也会在以任何方式关闭对话框时运行 CloseFunction 代码,而不仅仅是在使用 X 或其他东西关闭时。因此,如果您想在使用 X 或“取消”按钮关闭对话框时运行某些代码,而不是在对话框因其他事件而关闭时运行某些代码(例如,在我的情况下,当提交的输入被验证为正确时),那么这将不起作用。
33赞 Mo Ming C 11/10/2009 #4
$("#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');
    }
});
2赞 Alexei 6/16/2011 #5

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

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

评论

1赞 cssyphus 5/16/2013
只需使用 .on() -- 而不是 .live() 或 .bind()
10赞 morttan 7/20/2011 #6

这就是对我有用的东西......

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});
16赞 Umair Noor 6/20/2012 #7

你也可以试试这个

$("#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");
                }
            }
        });
22赞 Taksh 7/17/2014 #8
$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

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

8赞 Disper 11/10/2014 #9

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

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

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

评论

0赞 reggaeguitar 12/2/2020
OP的答案基本相同
0赞 Disper 12/3/2020
@reggaeguitar真的。OP 在 2015 年更新了对 on() 的答案:)
0赞 reggaeguitar 12/3/2020
我不知道他们在你之后更新了他们的,如果你编辑你的答案,我会把我的反对票改为赞成票
6赞 Mehdi Roostaeian 11/24/2016 #10

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

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