title: JQuery newbie - dialog
body: <p>I'm trying to use the jqueryui dialog (<a href="http://docs.jquery.com/UI/Dialog" rel="nofollow noreferrer">http://docs.jquery.com/UI/Dialog</a>) within my html page.</p>
  
  <p>Has anyone got any links on the web to the javascript libraries needed to use the dialog widget?</p>
  
  <p>My HTML code taken from (<a href="http://jqueryui.com/demos/dialog/modal-message.html" rel="nofollow noreferrer">http://jqueryui.com/demos/dialog/modal-message.html</a>) is below - I think linking to the javascript libraries is the problem..</p>
  
  <p>Please help, many thanks.</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;jQuery UI Dialog - Modal message&lt;/title&gt;
      &lt;link type="text/css" href="/css/ui.all.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="/js/jquery-1.3.2.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/ui/ui.core.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/ui.draggable.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" src="/js/ui.resizable.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/ui.dialog.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/js/external/bgiframe/jquery.bgiframe.js"&gt;&lt;/script&gt;
      &lt;link type="text/css" href="/css/demos.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript"&gt;
      $(function() {
          $("#dialog").dialog({
              bgiframe: true,
              modal: true,
              buttons: {
                  Ok: function() {
                      $(this).dialog('close');
                  }
              }
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="demo"&gt;
  
  &lt;div id="dialog" title="Download complete"&gt;
      &lt;p&gt;
          &lt;span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"&gt;&lt;/span&gt;
          Your files have downloaded successfully into the My Downloads folder.
      &lt;/p&gt;
      &lt;p&gt;
          Currently using &lt;b&gt;36% of your storage space&lt;/b&gt;.
      &lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;!-- Sample page content to illustrate the layering of the dialog --&gt;
  &lt;div class="hiddenInViewSource" style="padding:20px;"&gt;
      &lt;p&gt;Sed vel diam id libero &lt;a href="http://example.com"&gt;rutrum convallis&lt;/a&gt;. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.&lt;/p&gt;
      &lt;form&gt;
          &lt;input value="text input" /&gt;&lt;br /&gt;
          &lt;input type="checkbox" /&gt;checkbox&lt;br /&gt;
          &lt;input type="radio" /&gt;radio&lt;br /&gt;
  
          &lt;select&gt;
              &lt;option&gt;select&lt;/option&gt;
          &lt;/select&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;textarea&gt;textarea&lt;/textarea&gt;&lt;br /&gt;
      &lt;/form&gt;
  &lt;/div&gt;&lt;!-- End sample page content --&gt;
  
  &lt;/div&gt;&lt;!-- End demo --&gt;
  
  &lt;div class="demo-description"&gt;
  
  &lt;p&gt;Use a modal dialog to explicitly acknowledge information or an action before continuing their work.  Set the &lt;code&gt;modal&lt;/code&gt; option to true, and specify a primary action (Ok) with the &lt;code&gt;buttons&lt;/code&gt; option.&lt;/p&gt;
  
  &lt;/div&gt;&lt;!-- End demo-description --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>