jquery pop-up working in jsFiddle but not on my site

Question

I found this jsFiddle with a pop-up box, and I'm trying to implement in on my site.

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");
});

Although it works on jsfiddle, on my site the div appears inside the page and not as a pop-up (just like I wouldn't have Jquery-UI).

My site has Jquery-2.0.2 and jQuery-ui-1.0.3, which according to jsfiddle it should work.

Any tips of what I might be missing?

Answer 1

The fiddle is configured to wrap the code in the onload event. So if you run this on your site, you need to manually add the DOM ready wrapper (or place the code right before the </body> ). Without this, your code runs before the elements are rendered, and subsequently the dialog is not transformed into a dialog by jQuery.

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

    $("#open").click(function () {
        $("#dialog").dialog("open");
    });
});

Answer 2

Try to add this script and css in your head tag

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

It will link jQuery js file, jQuery UI API js file, and jQuery UI CSS file.

You can refer demo here and documentation here