使 jQuery ui 对话框不起作用？

Question

我这里有一些代码应该使用 jquery ui 生成一个对话框。

CSS

        body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; }

    .ui-dialog-osx {
        -moz-border-radius: 0 0 8px 8px;
        -webkit-border-radius: 0 0 8px 8px;
        border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px;
    }

图书馆

<script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.min.js"></script>

JS

$("#dialog-message").dialog({
    modal: true,
    draggable: true,
    resizable: true,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});

HTML

世界你好！

<div id="dialog-message" title="Important information">
    <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
    <div style="margin-left: 23px;">
        <p>
            We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
            <br /><br />
            Our hotel will reopen at 11th of January 2011.<br /><br />
            Another line which demonstrates the auto height adjustment of the dialog component.
        </p></div>
</div>

我实际上是使用 Google 在 this fiddle 上找到的。我注意到小提琴使用的是 jQuery 1.5.2，但我没有那个库（我下载它们以便我可以离线编码）。这段代码在我的本地浏览器上对我不起作用，即使它适用于小提琴。当我将小提琴使用的库更改为 jQuery 1.11.0（这是我本地笔记本电脑中的库）时，小提琴失败了。

我在想如果我有最新的 jQuery 版本，就足以支持新功能了吗？还是需要单独下载这个库？

当我查看控制台是否有错误时，没有错误。所以就这样了。

这里有什么问题？

Answer 1

尝试将jQuery 和jQueryUI 包含一次，而不是像您现在所做的那样包含两次：

<script type="text/javascript" src="scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.min.js"></script>

并将您的代码包装在 DOM 就绪处理程序中：

$(function() {
     // Your jQuery code here
});