样式操作
<!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>