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

时间:2008-10-05 12:52:53

标签: javascript jquery jquery-ui modal-dialog jquery-ui-dialog

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

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

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

我知道我可以在单击关闭按钮时运行代码,但不会覆盖用户使用escape或右上角的x关闭。

10 个答案:

答案 0 :(得分:243)

我找到了它!

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

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

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

答案 1 :(得分:182)

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

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

答案 2 :(得分: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');
}**
});

答案 3 :(得分:20)

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

"靠近"对话框的属性给出了相同的close事件。

答案 4 :(得分:14)

你也可以尝试这个

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

答案 5 :(得分:10)

这对我有用......

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

答案 6 :(得分:8)

  

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

因为实际上没有人使用。on()代替bind()创建答案,所以我决定创建一个答案。

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

答案 7 :(得分:6)

添加选项'关闭'喜欢在示例下做你想要的内联函数

SELECT  A.DATAAREAID, A.ITEMID
, B.ACTIVATIONDATE, B.PRICE, B.CREATEDDATETIME, B.RECID
, 'DEFAULTORDERTYPE' = CASE
    WHEN C.DEFAULTORDERTYPE = 0 THEN 'Purch'
    WHEN C.DEFAULTORDERTYPE = 1 THEN 'Production'
    WHEN C.DEFAULTORDERTYPE = 2 THEN 'Transfer'
    WHEN C.DEFAULTORDERTYPE = 3 THEN 'Kanban'
    ELSE 'Bestaat niet'
    END
, 'PRODUCTTYPE' = CASE
    WHEN D.PRODUCTTYPE = 1 THEN 'Item'
    WHEN D.PRODUCTTYPE = 2 THEN 'Service'
    ELSE 'Bestaat niet'
    END
, E.MODELGROUPID AS 'Item Model Group'
FROM INVENTTABLE AS A
LEFT JOIN INVENTITEMPRICE AS B ON A.ITEMID = B.ITEMID AND A.PARTITION = B.PARTITION AND A.DATAAREAID = B.DATAAREAID
LEFT JOIN INVENTITEMSETUPSUPPLYTYPE AS C ON A.ITEMID = C.ITEMID AND A.DATAAREAID = C.ITEMDATAAREAID AND A.PARTITION = C.PARTITION
LEFT JOIN ECORESPRODUCT AS D ON A.PRODUCT = D.RECID AND A.PARTITION = D.PARTITION
LEFT JOIN INVENTMODELGROUPITEM AS E ON A.ITEMID = E.ITEMID AND A.DATAAREAID = E.ITEMDATAAREAID
WHERE A.KNK_ITEMHIDDEN = 0  
AND (B.PRICE = 0 OR B.price IS NULL) 
ORDER BY A.DATAAREAID, A.ITEMID, B.ACTIVATIONDATE 

答案 8 :(得分:4)

如果我理解你正在谈论的窗口类型,不会 $(窗口).unload()(对话框窗口)给你需要的钩子吗?

(如果我误解了,并且你在谈论通过CSS而不是弹出式浏览器窗口创建的对话框,那么所有关闭该窗口的方式是你可以注册点击手的元素。)

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

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

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

答案 9 :(得分:2)

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

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