mouse over to show a popup

someone please help me..
How can i insert all that in any wordpress page, where when i click on “Size Chart” it gives a popup and loads the HTML?

I have a javascript:
function deselect() {
$(“.pop”).slideFadeToggle(function() {
$(“#sizechart”).removeClass(“selected”);
});
}

$(function() {
$(“#sizechart”).live(‘click’, function() {
if($(this).hasClass(“selected”)) {
deselect();
} else {
$(this).addClass(“selected”);
$(“.pop”).slideFadeToggle(function() {
$(“#email”).focus();
});
}
return false;
});

$(“.close”).live(‘click’, function() {
deselect();
return false;
});
});

$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: ‘toggle’, height: ‘toggle’ }, “fast”, easing, callback);
};

/*

<!– my html looks like this:
<div class =”messagepop pop”>
<div class=”ASMAINHeader”>
<h3>Standard Salwar Kameez</h3>
</div>
<div class=”ASBody”>
<ul class=”ASHeader”>

• Bust
• text
• Bust

<br clear=”all”>
<div id=”salwar”>
<div class=”asContent”>
<div class=”asType”> SMALL </div>
<div class=”asNmbr coll4″>
<ul class=”bdr”>

<li 32 /li>
<li 34 /li>
<li 36 /li>
<br clear=”all”>

• 32
• 34
• 36

</div>
</div>

</div>

<div class=”asContent”>
<div class=”asType”> Medium </div>
<div class=”asNmbr coll4″>
<ul class=”bdr”>

• 32
• 32
• 32

<br clear=”all”>

• 32
• 32
• 32

</div>
</div>
<div class=”asContent”>
<div class=”asType”> Large </div>
<div class=”asNmbr coll4″>
<ul class=”bdr”>

• 32
• 32
• 32

<br clear=”all”>

• 32
• 32
• 32

</div>
</div>
</div>
</div>

Size chart
–>*/

My css looks like this:
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}

.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:500px;
z-index:50;
padding: 25px 25px 20px;
}

label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}

.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
.ASBody {
border-top: 1px solid #999;
}
.ASHeader {
float: right;
font-weight: bold;
}
.ASHeader li, .ASBody li {
float: left;
text-align: center;
width: 175px;
line-height: 25px;
}
.asContent:first-child {
margin-top: 0px;
}
.asContent {
background: #18ECEC;
border-radius: 5px;
height: 55px;
margin-top: 11px;
clear: left;
}
.asType {
padding: 10px;
width: 70px;
height: 30px;
line-height: 30px;
font-weight: bold;
float: left;
}
.coll4 {
width: auto;
}
.asNmbr {
float: right;
}
.asNmbr ul:first-child {
float: left;
}
.bdr {
border-bottom: 1px dotted #333;
}
ul {
list-style-type: none;
}
.ASHeader li, .ASBody li {
float: left;
text-align: center;
width: 125px;
line-height: 25px;
}
.roundBox {
position: absolute;
z-index: 999;
top: -2px;
left: -118px;
width: 530px;
left: -377px;
top: 29px;
}
.ASMAINHeader {
padding: 5px;
height: 20px;
width: 100%;
}
.ASMAINHeader h3 {
text-align: center;
}