title: Open dialog with JQuery UI
body: <p>I would like to open a JQuery UI dialog when a user clicks on a link. So far I have this  </p>
  
  <pre><code>&lt;script&gt;
      //to hide the dialog box on loading
      $j(function() {
          $j( "#dialog" ).hide();
      });
  
      $('.button').click(function(){
          $('#dialog').dialog('open');
      });
  &lt;/script&gt;
  
  &lt;div id="dialog" title="Basic dialog"&gt;
      &lt;p&gt;Dialog box&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;a href="#" class="button"&gt;The button&lt;/a&gt;
  </code></pre>
  
  <p>But the dialog won't open by clicking the link... Everything is included well.</p>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript" src="js/jquery-1.6.2.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var $j = jQuery.noConflict();
  &lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/ui/jquery.ui.dialog.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript" src="js/ui/jquery.effects.core.js"&gt;&lt;/script&gt;
  </code></pre>