<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<htmlxmlns="http://www.w3.org/1999/xhtml
">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8" />
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js
"></script>
<title>点击显示遮罩层</title>
<styletype="text/css">
body { font: 12px Verdana, Arial, Helvetica, sans-serif; }
.mask { position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #B2B2B2; z-index: 999; left: 0px; opacity: 0.5; -moz-opacity: 0.5; }
.content { display: none; padding: 25px 20px; width: 600px; border: 1px solid #b2b2b2; background: #fff; z-index: 1000; position: fixed; left: 25%; top: 20%; }
.content h3, .content p { padding: 10px; background: #888; color: #fff; }
#close { cursor: pointer; font-size: 20px; color: #888; position: absolute; top: 5px; right: 20px; }
#open1 { width: 90px; color: #000; cursor: pointer; padding: 10px; background: #888; color: #fff; }
</style>
<scripttype="text/javascript">
$(function(){
$("#open1").click(function(){
$("#mask").css({
"height":$(document).height(),
"width":$(document).width()
}).show();
})
$("#open1").click(function(){
$(".content").show();
})
$("#close").click(function(){
$(".content").hide();
$("#mask").hide();
})
})
</script>
</head>
<bodystyle="height:10000px">
<divid="mask"class="mask"></div>
<divid="open1">点击显示遮罩层</div>
<divclass="content">
<h3>HTML 5</h3>
<p>XHTML 是更严谨更纯净的 HTML 版本。</p>
<spanid="close">x</span>
</div>
</body>
</html>