title: Modal-dialog won't hide on page load
body: <p>I am trying to create a modal dialog to just show content (html of some sort or other):</p>
  
  <pre><code>&lt;script&gt;
  $.fx.speeds._default = 1000;
  $(function() {
      $( "#dialog" ).dialog({
          autoOpen: false,
          closeOnEscape: true,
          modal: true,
          position: 'center',
          width: 800,
          height: 600,
          show: "blind",
          hide: "explode"
      });
  
      $( "#opener" ).click(function() {
          $( "#dialog" ).dialog( "open" );
          return false;
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>When I view the page, the dialog is inline and not hidden. Here is my html:</p>
  
  <pre><code>&lt;div id="dialog"&gt;This is my dialog that should be hidden until called&lt;/div&gt;
  &lt;button id="opener"&gt;I Open the Dialog&lt;/button&gt;
  </code></pre>
  
  <p>What am I doing wrong?</p>