<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<style>
.over{
z-index: 1000;
width: 100%;
height: 100%;
opacity:0.5;
filter:alpha(opacity=80);
background-color: black;
position: fixed;
top: 0px;
left: 0px;
}
.wnd{
z-index: 1001;
width: 600px;
height: 300px;
background-color: #6699CC;
border: 1px solid #0000FF;
position: absolute;
top: 25%;
left: 25%;
padding: 10px;
}
.container{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 0px;
display: none;
}
</style>
<script>
function show(id)
{ document.getElementById(id).style.display = 'block'; }
function hide(id)
{ document.getElementById(id).style.display = 'none'; }
</script>
<body>
<input type="button" value="Открыть" onclick="show('popup');">
<!------- WINDOW ------->
<div id="popup" class="container" onmousedown="return false;">
<div class="over"></div>
<div class="wnd">
<br />
<div style="margin:150px 5px 5px 260px;"><input type="button" onclick="hide('popup');" value="Закрыть" /></div>
</div>
</div>
</body>
</html>
Вот, думаю вам это поможет.