<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type ="text/css">
#areaPlay {
border :1px solid #000;
width :500px;
height :400px;
margin :50px auto ;
z-index:9999999;/**越大越上面 只对绝对布局有效*/
position :absolute;/**绝对定位*/
background-color:#fff;
left :200px;
top:200px;
}
#showdow {
border :1px solid #000;
width :100%;
height:700px;
position :absolute;/**绝对定位*/
left :2px;
top:2px;
background-color:#808080;
opacity:0.4;/**透明度*/
z-index:9999998;/**越大越上面 只对绝对布局有效*/
}
.show {
display:block;
}
.hid {
display:none;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type ="text/javascript">
$(function () {
$("#showdow").addClass("hid");
});
function trunOff()
{
// $("#showdow").addClass("show");
// $("#showdow").attr("class","show");
$("#showdow").toggleClass("hid");//内部判断hid样式是否存在如果有就移除，如果没有就加进去
}
function trunOff() {
$("#showdow").toggleClass("hid");//切换样式
}
</script>
</head>
<body>
<a href="javascript:trunOff()" >关灯</a>
<div id="areaPlay">播放区域
<a href="javascript:trunOff()">开灯</a>
</div>
<input type ="text" />
<div id="showdow" class="hid"></div>
</body>
</html>
原文：http://www.cnblogs.com/sumg/p/3787721.html