CODEWITHSUNDEEP
javascriptjqueryhtml
Alexandru Severin
Alexandru Severin

Reputation: 6238

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

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?

Upvotes: 0

Views: 1586

Answers (2)

Chirag Vidani
Chirag Vidani

Reputation: 2587

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

Upvotes: 1

MrCode
MrCode

Reputation: 64536

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

Upvotes: 1

Related Questions