views:

74

answers:

2

I'm attempting to display a modal dialog as a test run before I try to perform a more difficult task. However, I seem to be doing something wrong as the code I copied from the demo site is not working when I set it up and run it locally.

Here is my source:

<html>
    <head>
     <script type="text/javascript" src="lib/jquery/js/jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="lib/jquery/js/jquery-ui-1.7.2.min.js"></script>
     <script type="text/javascript">
      $(document).ready(function() {
       var $dialog = $('<div></div>')
        .html('This dialog will show every time!')
        .dialog({
         autoOpen: false,
         title: 'Basic Dialog'
       });

       $('#opener').click(function() {
        $dialog.dialog('open');
       });
      });
     </script>
    </head>
    <body>
        <button id="opener">Press</button>
    </body>
</html>

So far, I have primarily been thinking the problem may have been a relative path problem with the way I'm bringing in the external libraries. But I tried variations, and nothing changed.

I am still new to Javascript, so I may be doing some very noob-ish here. Any help would be appreciated. Thank you.

A: 
$(document).ready(function() {
  var $dialog = $('<div></div>').appendTo(document.body);
});
czarchaic
+1  A: 

Hi Jason Here are some things you could try firstly add a link tag for the css

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/>

secondly make sure that you have the dialog component selected in your custom ui js package.

almog.ori
+1 for mentioning css. Adding CSS should work Jason.It did for me
ram