<html>
<title>Reviel MOdal</title>
<head>
<div id="modalPage">
<div class="modalBackground">
</div>
<div class="modalContainer">
<div class="modal">
<div class="modalTop"><a href="RevielModal_popup.html">[X]</a></div>
<div class="modalBody">
<p>i want to show the text box values here....</p>
</div>
</div>
</div>
</div>
<style type="text/css">
body
{
margin: 0px;
}
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px; left: 0px;
}
.modalBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%; height: 100%; background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.modalContainer
{
position: absolute;
width: 300px;
left: 50%;
top: 50%;
z-index: 750;
}
.modal
{
background-color: white;
border: solid 4px black; position: relative;
top: -150px;
left: -150px;
z-index: 1000;
width: 300px;
height: 300px;
padding: 0px;
}
.modalTop
{
width: 292px;
background-color: #000099;
padding: 4px;
color: #ffffff;
text-align: right;
}
.modalTop a, .modalTop a:visited
{
color: #ffffff;
}
.modalBody
{
padding: 10px;
}
</style>
<script language="javascript" type="text/javascript">
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.top = document.body.scrollTop;
}
function hideModal(divID)
{
document.getElementById(divID).style.display = "none";
}
</script>
</head>
<body>
<form name="f1">
<table border=2 color="orange">
<tr>
<td>
<table>
<tr>
<td>First Name</td>
<td>:</td>
<td><input type="text" id="fname" name="t1"></td>
</tr>
<tr>
<td>Middle Name</td>
<td>:</td>
<td><input type="text" id="mname" name="t2"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<input id="Button1" type="button" value="Click here to be naughty" onclick="revealModal('modalPage')" />
</body>
</html>
Juin 7th, 2010, 11:24 pm
