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.

**The Problem**
The pages don't load into the div, instead clicking on the links just goes straight to the page

In my **`<head>`** section

```
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="/js/load_modal.js"></script>

```

My load\_modal.js script looks like this:

```
$(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();
        });
    });
})

```

And the links I'm trying to put into the modal div look like this

```
<div id="dialog"></div>
<a class="modal" href="/privacy.html">privacy policy</a>

```

**Things I've Tried**

* Different versions of jQuery and jQuery UI
* Removing all code except for event.preventDefault(); -- this should keep the link from even loading but the page still loads!