i have 4 links on my page for navigation. It link contains a body of text. One of those links is a contact form.

I want onclick for the links to populate in some type of dialog box shading out the back ground of the index page and letting you
interact with the current frame you are viewing. once closed I would like people to have the ability to click another link and continue on doing so.

I have been trying to do this with jquery and have had no luck. here is my code....

jquery

$(document).ready(function() {

var dlg=$('#contact').dialog({
title: 'Contact Us',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:800,
height:800
});


$('#contact').click(function(e) {
e.preventDefault();
dlg.load('contact.php', function(){
dlg.dialog('open');
});
});
});

index page
header

<html>
<head>
<title>Liberty Partners</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.10.2.custom.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.ui.dialog.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
</head>

<body>

and this is the first div I am trying to get to open in a frame.

<div id="contact">
<div id="underHeader">
<a href="#" id="contact"><h1>Click TO Contact Us</h1></a>
</div>
</div>

when i click the link nothing happens.