jquery弹出在jsFiddle工作，但不是在我的网站

Question

我发现这个jsFiddle有一个弹出框，我试图在我的网站上实现。

HTML:

<div id="dialog">
    <p>Tell me a story</p>
    <textarea id="name"></textarea>
</div>
<input type="button" id="open" value="Open Dialog" />

Javascript:

$("#dialog").dialog({
    autoOpen: false,
    buttons: { 
        Ok: function() {
            $(this).dialog("close");
       },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});
$("#open").click(function () {
    $("#dialog").dialog("open");
});

虽然它在jsfiddle上工作，但在我的网站上，div显示在页面内，而不是作为弹出窗口(就像我不会有Jquery-UI一样)。

我的网站有Jquery-2.0.2和jQuery-ui-1.0.3，根据jsfiddle它应该工作。

有什么我可能错过的提示吗?

Answer 1

试着把这个脚本和css添加到你的head标签

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>                       
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

链接jQuery js文件、jQuery UI API js文件和jQuery UI CSS文件。

你可以在这里参考demo，在这里参考文档

Answer 2

配置为将代码包装在onload事件中。因此，如果在您的站点上运行此程序，则需要手动添加DOM就绪包装器(或者将代码放在</body>前面)。如果没有这个，你的代码在元素呈现之前运行，随后对话框不会被jQuery转换成一个对话框。

$(function(){
    $("#dialog").dialog({
        autoOpen: false,
        buttons: { 
            Ok: function() {
                $(this).dialog("close");
           },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });
    $("#open").click(function () {
        $("#dialog").dialog("open");
    });
});