title: jQueryUI Modal Refreshing Page on Close
body: <p>In my jQueryUI modal, whenever I click on the buttons, the parent page refreshes, even when I have <code>preventDefault()</code> or <code>return false</code>. Is this expected behavior?</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;li&gt;&lt;a id="addFunds" class="no-close" href="#"&gt;Add Funds&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>The modal:</p>
  
  <pre><code>&lt;div id="addFundsModal" class="modal-hidden" title="Add Funds to Your Account"&gt;
      &lt;div class="leftBar"&gt;
          &lt;h3&gt;Add Funds&lt;/h3&gt;
                  //other stuff
                  &lt;form&gt;
                        //&lt;fieldset&gt;, etc.
                        &lt;button class="modal-close btnBlue" href="#"&gt;Cancel&lt;/button&gt;
                &lt;button class="add-funds btnGreen"&gt;Add Funds&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The jQuery:</p>
  
  <pre><code>$('#loggedInDropdown').on('click', '#addFunds', function(e) {
          e.preventDefault();
          $('#addFundsModal').dialog({
              modal: true,
              dialogClass: 'no-close',
              width: 500
          });
      });
  
      $('.ui-dialog').on('click', '.modal-close', function(e) {
          e.preventDefault();
          $('#addFundsModal').dialog('close');
      });
  </code></pre>
  
  <p>I'm also not sure about whether I should use <code>dialog.close</code> or <code>dialog.destroy</code>, but that is for another post, I suppose.</p>