title: JQuery UI Dialog displaying, not working as dialog
body: <h2>Problem:</h2>
  
  <p>The dialog div is displaying without the buttons being pressed, and does not appear as an overlay when I press them. I'm tearing my hair out, so thanks in advance.</p>
  
  <h2>Code:</h2>
  
  <p>Includes:</p>
  
  <pre><code>&lt;script src="js/jquery-1.5.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
  &lt;script src="js/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;script src="js/ui/jquery.ui.position.js"&gt;&lt;/script&gt;
  &lt;script src="js/ui/jquery.ui.autocomplete.js"&gt;&lt;/script&gt;
  &lt;script src="js/ui/jquery.ui.dialog.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="css/jquery.ui.autocomplete.
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.ui.all.
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.ui.theme.
  &lt;link rel="stylesheet" type="text/css" href="css/jquery.ui.dialog.css" /&gt;
  </code></pre>
  
  <p>Buttons: <code>&lt;a class="phoneadder"&gt;Stuff&lt;/a&gt;</code></p>
  
  <p>Scripts: </p>
  
  <pre><code>&lt;script&gt;
          $( "#dialog-form" ).dialog({
              autoOpen: false,
              height: 300,
              width: 350,
              modal: true
          }
      );
          $( ".phoneadder" ).click(function() {
              $( "#dialog-form" ).dialog( "open" );
              return false;
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Dialog:</p>
  
  <pre><code>&lt;div id="dialog-form" title="Create new phone"&gt;
      &lt;p&gt;All form fields are required.&lt;/p&gt;
  
      &lt;form&gt;
      &lt;fieldset&gt;
          ...some html here
      &lt;/fieldset&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>