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

IT技术 javascript jquery jquery-ui modal-dialog jquery-ui-dialog
2021-01-31 23:11:29

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

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

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

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

6个回答

我找到了！

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

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

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

错字：$('div#popup_content').bind('dialogclose', function(event)) { ... }
2021-03-24 23:11:29
这很有帮助，但$('div#popup_content')对吗？我应该用什么替换它，记住我的对话框是这样打开的jQuery.fn.dialog.open({})
2021-03-25 23:11:29
请记住，如果以前从未在页面上打开过 jQuery UI 对话框，则 DOM 中将不存在覆盖 div。因此，您可以考虑做这样的事情：$('body').on('dialogclose', '.ui-dialog', function(){...});
2021-04-08 23:11:29
我看到对话框首先关闭然后出现警报，如果每个人的情况都一样，有人可以帮助我让警报首先出现，然后单击确定然后窗口关闭吗？纠正我....
2021-04-09 23:11:29
这应该更新为使用 on() 而不是现在已经过时的 bind()。
2021-04-11 23:11:29

我相信您也可以在创建对话框时执行此操作（从我所做的项目中复制）：

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

这个答案对我来说似乎比接受的答案更正确。此外，可以在此处找到正确的 API 文档：api.jqueryui.com/dialog/#event-close
2021-03-18 23:11:29
你有overlay两次。这不是必要的吗？
2021-03-18 23:11:29
Jake N - 您实际上需要编写一个名为“CloseFunction”的对话框可访问的函数才能使其工作，例如就在上面，您可以编写 var CloseFunction = function() { //Do your custom closing stuff here };
2021-03-30 23:11:29
这是一个选项，但有时代码在不同的地方使用。当您想在不同的上下文中添加不同的行为并重用对话框创建代码以获得标准化时，所选答案适用。
2021-03-30 23:11:29
这有效并且在这里绝对是一个需要和有用的答案，但它也会在对话框以任何方式关闭时运行 CloseFunction 代码，而不仅仅是在用 X 或其他东西关闭时。因此，如果您想在使用 X 或取消按钮关闭对话框时运行某些代码，而不是在它被其他发生的事情关闭时运行某些代码（例如在我的情况下，当提交的输入被验证为正确时），那么这不会工作。
2021-04-07 23:11:29 
$("#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');
    }
});

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

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

你也可以试试这个

$("#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");
                }
            }
        });
其它你可能感兴趣的问题
上一篇Ajax 成功事件不起作用 下一篇JavaScript 数组 .reduce with async/await