Posted in Javascript onMarch 04, 2014
想大家都做过遮罩层这种常见的功能，css或jquery实现，实现方式多样化，这里http://我介绍我在项目中实现的方式，全屏遮罩，部分区域可操作，非常实用。
效果如下图： 
js 实现部分：
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
reg.onclick = function() {
myAlert.style.background = "#e2ecf5";
myAlert.style.zIndex = "501";
myAlert.style.position = "absolute"; var signSpan = document.getElementById("signSpanId");
myAlert.style.top = signSpan.offsetTop;
myAlert.style.left = signSpan.offsetLeft;
mybg = document.createElement("div");
mybg.setAttribute("id", "mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
//document.body.style.overflow = "hidden";
}
</script> 页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> <body> <table border="1" align="center" width="700px"> <tr> <td width="300px" height="200px" style="font-size:28px; font-weight:bold"> <div id="content"> <a href="#"> 启动遮罩层 </a> </div> </td> <td style="vertical-align:top"> <div id="signSpanId" style="position:absolute;"></div> <div id="alert" align="top"> <h4> <span> 这是高亮显示区域 </span> </h4> <p> <label> 用户名 </label> <input type="text" /> </p> <p> <label> 密 码 </label> <input type="password" /> </p> <p> <input type="submit" value="注册" /> <input type="reset" value="重置" /> </p> </div> </td> <td width="100px"> <div>我是第三列</div> </td> </tr> </table> </body> </html>
css+js实现部分区域高亮可编辑遮罩层
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@