直接用代码来说明
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskTest.aspx.cs" Inherits="Test07.MaskTest" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form1" runat="server"> <div id="countdivmaks" style="position: relative"> 在一个层上添加一个遮罩层的实现:<br /> 实现原理：就是在要添加遮罩层的层上里面添加一个层，让该层撑满整个层即可<br /> 具体实现要求说明：在要添加遮罩层的位置必须是相对的位置：psotion:relative<br /> 遮罩层的位置必须是绝对的：postion：aasolute;100%;heigth:100%;top:0px;left:0px; </div> <div> <input type="button" id="but1" value="添加遮罩层" /> </div> </form> </body> </html> <script src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> var hasAdd = false; $("#but1").click(function () { if (!hasAdd) { hasAdd = true; var maskdiv = '<div id="divmask" style="position:absolute;100%;height:100%;background-color:black;opacity: 0.5;top: 0px;left:0px;"></div>'; $("#countdivmaks").append(maskdiv); $(this).val("去掉遮罩层"); } else { hasAdd = false; $("#divmask").remove("div"); $(this).val("添加遮罩层"); } }); </script>