使jQuery ui对话框不起作用？

Question

I have some code here that's supposed to produce a dialog box using the 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;
    }

LIBRARIES

<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

Hello World!

<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>

I actually found it on this fiddle using Google. I noticed that the fiddle is using jQuery 1.5.2 but I don't have that library (I download them so I can code offline). This code doesn't work for me on my local browser even though it works for fiddle. When I change the library the fiddle uses to jQuery 1.11.0 (which is the one I have in my laptop locally), the fiddle fails.

I was thinking if I have the latest jQuery version, that would be enough to support the new features? Or do I need to download this library separately?

When I look at the console for errors, there are no errors. So there's that out of the way.

What's the problem here?

Answer 1

Try to include jQuery and jQueryUI once instead of twice like what you're doing at this moment:

<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>

and also wrap your code inside DOM ready handler:

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