Jquery Modal Box Help Needed

JavaScript
1

I have a project that I need to create a modal for. It activates when a link is clicked. For links that link to pages within the folder it doesn’t pop up. But, if it goes outside of that folder (either at the same domain or to another domain) it is supposed to come up and alert the user that they are leaving that area.

So far I have to modal coming up, but the mask doesn’t appear. Also, I’m having trouble figuring out what to do for the URL situation.

This is the plan given to me for the links:
doc.ready
.medicare a -> click
get active url
get clicked url
prevent default click event

parse url
active
clicked

if domains not equal
show window

else
if sections not equal
show window

Any help would be loved. I am a noob to Jquery and is the toughest project I’ve taken on thus far.

HTML & Javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>overlay test</title>
<link href="../library/main.css" rel="stylesheet" type="text/css" />
<link href="../library/modaloverlay.css" rel="stylesheet" type="text/css" />
<script src="../library/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../library/jquery.overlay.min.js" type="text/javascript"></script>
</head>

<body>
<div id="page_wrapper" align="center">
<div id="main_content" class="medicare">
	<p>This is a bunch of text with some links and junk. Here is a link to <a href=	"http://www.google.com">google</a>. Here is a link to the <a href="../index.html">main page</a>. Here is a link within <a href="medicare.html">medicare</a>.</p>
</div>
</div>
<!-- overlay dialog -->
<div class="modal" id="leavingsite">
	<h2>You are about to leave the Humana Medicare website.</h2>
	<p>Do you wish to continue?</p>
	<form>
        <button type="submit" class="close">Continue</button>
        <button type="button" class="close">Go Back</button>
        <br />
        <input name="optout" type="checkbox" value="Do not display this message again." />
	</form>
</div>
<script>
$(document).ready(function() {
	$(".medicare a").click(function(e) {
		e.preventDefault();
		var triggers = $(".modal").overlay({
			mask: {
				color: '#999',
				loadSpeed: 200,
				opacity: 0.9
				},
			closeOnClick: false,
			load: true
		});
		
		$(window.location)
		
		var buttons = $("#leavingsite button").click(function(e) {
				var yes = buttons.index(this) === 0;
			});
	});
});
</script>
</body>
</html>

CSS for modal (if need to look at)

@charset "UTF-8";
/* CSS Document */

.modal {
	background-color: #fff;
	display: none;
	width: 350px;
	padding: 15px;
	text-align: left;
	border: 2px solid #333;
	
	opacity: 0.8;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 0 50px #ccc;
	-webkit-box-shadow: 0 0 50px #ccc;
}

.modal h2 {
	margin: 0px;
	padding: 10px 0 10px 45px;
	border-bottom: 1px solid #333;
	fontsize: 20px;

#leavingsite {
	position: fixed;
	z-index: 9999;
	top: 37.5px;
	left: 448px;
	display: block;
}
2

Help no longer needed.