jQueryUI 对话框不工作 - 为什么？答案

【问题标题】：jQueryUI Dialog Box not working - Why?jQueryUI 对话框不工作 - 为什么？
【发布时间】：2012-05-28 13:49:26
【问题描述】：

我就是想不通这个。对话框不弹出。我已经尝试了各种各样的东西，但它只是不起作用。这是我的代码：

<head>
    <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.20.custom.min.js"></script>
</head>
<body>
<script>
$(function() {
    // Dialog
    $('#dialog').dialog({
            autoOpen: false,
            width: 600,
            buttons: {
                    "Ok": function() {
                            $(this).dialog("close");
                    },
                    "Cancel": function() {
                            $(this).dialog("close");
                    }
            }
    });

    // Dialog Link
    $('#dialog_link').click(function(){
            $('#dialog').dialog('open');
            return false;
    });
});  
</script>

<a href="#" id="dialog_link">Open Dialog</a>

<div id="dialog">This should popup</div>
</body>

这里有什么问题？任何帮助表示赞赏。

【问题讨论】：

works fine here
控制台有错误吗？你所拥有的看起来不错
为什么这需要在一个函数中？像这样在文档中设置它 -> jsfiddle.net/h7qNR/2
您是否遇到任何脚本错误？
我认为script 标记在body 之后缺少type="text/javascript"。 IE。 <body><script type="text/javascript">...

标签： javascript jquery jquery-ui dialog

【解决方案1】：

尝试使用它可能会起作用。

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

【讨论】：

【解决方案2】：

jquery.ui.dialog.js 在这段代码中在哪里？？？？？？

请将此文件作为脚本标签添加到代码中......

你可以从这里放这个 JS 文件：

http://jqueryui.com/ui/jquery.ui.dialog.js

【讨论】：

链接失效。 jQueryUI-File中不是包含Dialog的代码吗？

【解决方案3】：

<script></script> 还不够。应该是<script type="text/javascript"></script>

【讨论】：

我尝试了 jsfiddle 并且它有效。那么您的代码可能有其他问题吗？这里：jsfiddle.net/xc4jy/1

【解决方案4】：

我认为script 紧跟在body 之后的标签缺少type="text/javascript"。 IE。 <body><script type="text/javascript">...

【讨论】：

【解决方案5】：

您必须在

之后包含脚本块

<a href="#" id="dialog_link">Open Dialog</a>
<div id="dialog">This should popup</div>

在 body 元素之前阻塞，它应该可以工作。

您还必须包含 jQuery UI 的所有样式，以使其看起来更好。

【讨论】：

您的 jquery 文件可以访问吗？尝试将此包含到标题<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

【解决方案6】：

我也有同样的问题。这可能是兼容性问题，请尝试包括以下内容而不是您拥有的内容

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>

还要正确显示对话框，替换jquery-ui-1.8.xx.custom.css 以匹配jquery-ui.min.js 版本，我找不到google ajax 链接。

我想找到一个替代解决方案，但不知道是否能找到。

【讨论】：