遮盖层实现(jQuery+css+html)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>遮盖层</title> <style> /* 登录层 */ #choose{ display:none; width:360px; height:230px; background:#69F; position:absolute; top:30%; left:40%; z-index:1000; opacity:0.8; /*背景的透明度:(Firefox适用;)*/ filter:alpha(opacity =80); /*背景的透明度:(IE适用);*/ } /*遮罩层*/ #mid{ display:none; width:100%; height:100%; background:#000; position:absolute; top:0; left:0; z-index:10; opacity:0.4; /*背景的透明度:(Firefox适用;)*/ filter:alpha(opacity =40); /*背景的透明度:(IE适用); } </style> </head> <body> <a href="#" class="click">点击按钮</a>
<!--填充内容开始 往body里面写点内容,因为遮盖层要通过body去获取界面的高宽度,从而body的高宽同时决定了遮盖层的高宽。但是码友们在平时运用这个demo的时候,由于所写body的代码肯定是有的,而且是比较多的,所以一定要忽略我下面填充的内容-> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br />
1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />1<br />1<br /> 1<br /> 1<br /> 1<br /> 1<br />1<br />
<!-- 填充内容结束 -->
<!-- 表单层 --> <div id="choose"> <!-- 表单头部 --> <a class=close>关闭</a> <table> <tr> <td colspan="3" class="td"> </td> </tr> <tr> <td class="td1">登录名:</td> <td class="td2"><input type="text"/></td> <td class="td3">*</td> </tr> <tr> <td class="td1">密 码:</td> <td class="td2"><input type="password"/></td> <td class="td3">*</td> </tr> <tr> <td class="td1">验证码:</td> <td class="td2"><input type="text"/></td> <td class="td3">*</td> </tr> <tr> <td colspan="3" align="center"><input type="submit" value="登陆"/></td> </tr> </table> </div> <!-- 遮盖层 --> <div id="mid"></div> </body> <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script> <script> $(function(){ $(".click").click(function(){ var bh = $("body").height(); //获取当前浏览器界面的高度 var bw = $("body").width(); //获取当前浏览器界面的宽度 $("#mid").css({ height:bh, //给遮盖层的div的高宽度赋值 width:bw, display:"block" //遮盖层显示 }); $("#choose").show(); }); $(".close").click(function(){ $("#choose").hide(); $("#mid").hide(); }); }); </script> </html>