title: How can I make a dialog box from jQuery show only after I hit a button?
body: <p>This code is from the demo of modal confirmation on the jQuery site.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function() {
      $("#dialog").dialog({
          bgiframe: true,
          resizable: false,
          height:140,
          modal: true,
          overlay: {
              backgroundColor: '#000',
              opacity: 0.5
          },
          buttons: {
              'Yes': function() {
                  $(this).dialog('close');
              },
              'No': function() {
                  $(this).dialog('close');
              }
          }
      });
  });
  &lt;/script&gt;
  
  
  
  &lt;div class="demo"&gt;
  
  &lt;div id="dialog" title="Empty the recycle bin?"&gt;
      &lt;p&gt;&lt;span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"&gt;&lt;/span&gt;These items will be permanently deleted and cannot be recovered. Are you sure?&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;Confirm an action that may be destructive or important.  Set the &lt;code&gt;modal&lt;/code&gt; option to true, and specify primary and secondary user actions with the &lt;code&gt;buttons&lt;/code&gt; option.&lt;/p&gt;
  
  &lt;/div&gt;&lt;!-- End demo-description --&gt;
  </code></pre>
  
  <p>Can anyone tell me how to make this show only after I hit a button? Right now it automatically shows in the page right after loading.</p>