<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js "></script>
<style>
.close{
position:absolute;
top:50%;
left:50%;
font-weight:bold;
font-size:30px;
color:#fff;
background:#000;
opacity:0.8;
width:85px;
height:40px;
text-align:center;
display:block;
}
.covery{
position:absolute;
top:0;
left:0;
background:#ccc;
opacity:0.5;
width:100%;
display:block;
}
</style>
</head>
<body>
<input type="button" id="btn" value="click me" />
<script>
$(function(){
var h = $(document).height();
$('body').append('<div id="covery"></div>');
$('#covery').height(h).addClass('covery');
$('#covery').hide();
$('#btn').click(
function(){
$('#covery').show()
$('#covery').append('<a id="close">close</a>');
$('#close').addClass("close").click(function(){
$('#covery').hide()
})
}
);
})
</script>
</body>
</html>
