title: jQueryUI load page into DIV and into modal dialog
body: <p>I'm attempting to load a page into a a modal DIV but seem to be missing something (probably blatantly obvious!). Here's what I  have.</p>
  
  <p><strong>The Problem</strong>
  The pages don't load into the div, instead clicking on the links just goes straight to the page</p>
  
  <p>In my <strong><code>&lt;head&gt;</code></strong> section</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.18.custom.css" /&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="/js/load_modal.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>My load_modal.js script looks like this:</p>
  
  <pre><code>$(function() {
      $("#dialog").dialog({
          autoOpen: false,
          modal: true,
          width: 600,
          height: 400,
          buttons: {
                  "Close": function() {
                      $(this).dialog("close");
                  }
              }
          }
      });
  
      $(".modal").on("click", function(e) {
          e.preventDefault();
          $("#dialog").html("");
          $("#dialog").dialog("option", "title", "Loading...").dialog("open");
          $("#dialog").load(this.href, function() {
              $(this).dialog("option", "title", $(this).find("h2").text());
              //$(this).find("h1").remove();
          });
      });
  })
  </code></pre>
  
  <p>And the links I'm trying to put into the modal div look like this</p>
  
  <pre><code>&lt;div id="dialog"&gt;&lt;/div&gt;
  &lt;a class="modal" href="/privacy.html"&gt;privacy policy&lt;/a&gt;
  </code></pre>
  
  <p><strong>Things I've Tried</strong></p>
  
  <ul>
  <li>Different versions of jQuery and jQuery UI</li>
  <li>Removing all code except for event.preventDefault(); -- this should keep the link from even loading but the page still loads!</li>
  </ul>