jquery中的dialog()方法是怎么使用。我引入了dialog.js。

Posted 2023-04-03

jquery中的dialog()方法是怎么使用。我引入了dialog.js，但是页面载入时却是

TypeError: $("#dialgo").dialog is not a function。求大神告知

dialog是jquery UI库的一个UI组件。
你要使用dialog。仅仅引入jquery.js是不够的。
jquery只是轻量级的基础框架。
如果你要用jqueryUI的dialog组件。
就要引入jqueryUI的js及相关css样式文件。

依赖关系dialog --> jqueryUI --> jquery追问

我这边引入的是这三个js文件，不行吗？还得引入jqueryUI那个js吗？

追答

jquery.min.js是jquery.js的压缩版本。
你这样引入相当于重复引入了两次。这是不对的。
正确应该是

追问

那我引入jquery.js 不引入 jquery.min.js 行不行？

追答

可以的，他俩的区别仅仅是，min版本文件尺寸小，有利于网络传输减少流量。
但是因为进行了压缩，就无法阅读了。所以会给你一个压缩版用来实际生产时使用。再附加一个源码版本，供你阅读，调试时使用。

参考技术A dialog.js 要在jquery.js 的后面引入，

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

【中文标题】jquery-ui-dialog - 如何挂钩对话框关闭事件

【英文标题】：jquery-ui-dialog - How to hook into dialog close event

【发布时间】：2010-09-15 09:00:41

【问题描述】：

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

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

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

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

【参考方案1】：

我找到了！

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

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

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

【讨论】：

错字：$('div#popup_content').bind('dialogclose', function(event)) ...

这很有帮助，但$('div#popup_content') 对吗？我应该用什么替换它，记住我的对话框是这样打开的jQuery.fn.dialog.open()

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

这应该被更新为使用 on() 而不是现在已经过时的 bind()。

请记住，如果以前从未在页面上打开过 jQuery UI 对话框，则覆盖 div 将不会存在于 DOM 中。因此，您可以考虑这样做：$('body').on('dialogclose', '.ui-dialog', function()...);

【参考方案2】：

我相信您在创建对话框时也可以这样做（从我所做的项目中复制）：

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

Jake N - 您需要实际编写一个可访问名为“CloseFunction”的对话框的函数才能使其正常工作，例如，您可以在上面编写var CloseFunction = function() //Do your custom closing stuff here ;

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

你有两次overlay。这不是必要的吧？

这行得通，在这里绝对是一个需要和有用的答案，但它也会在任何时候以任何方式关闭对话框时运行 CloseFunction 代码，而不仅仅是在使用 X 或其他东西关闭时。因此，如果您想在使用 X 或 Cancel 按钮关闭对话框时运行某些代码，而不是当它被其他事件关闭时（例如在我的情况下，当提交的输入被验证为正确时），那么这不会工作。

【参考方案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”属性给出了相同的关闭事件。

【参考方案5】：

你也可以试试这个

$("#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】：

这对我有用...

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

【参考方案7】：

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

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

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

【讨论】：

OP的回答基本一致

@reggaeguitar 是真的。 OP 在 2015 年更新了 on() 的答案 :)

我不知道他们在你的更新之后更新了他们的，如果你编辑你的答案，我会将我的反对票改为赞成票

【参考方案8】：

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

close: function(e)
    //do something

【参考方案9】：

如果我理解您所说的窗口类型，那么 $(window).unload() （对于对话框窗口）是否会为您提供所需的钩子？

（如果我误解了，并且您说的是通过 CSS 制作的对话框，而不是弹出式浏览器窗口，那么 all 关闭该窗口的方式是您可以注册点击处理程序的元素.)

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

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

因此，要直接回答您的问题，我相信答案确实是“否”-没有可以挂钩的关闭事件，但是“是”-您可以轻松挂钩所有关闭对话框并获得你想要什么。

【讨论】：

嘿，安迪。我很喜欢 jquery-ui 中的对话框，它是通过 css 和 javascript 制作的。通过查看代码，我认为那里有一个钩子，但我不知道如何获得它。

【参考方案10】：

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

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

【讨论】：

只需使用 .on() -- 而不是 .live() 或 .bind()