首页 > 代码库 > 遮盖层实现(jQuery+css+html)

遮盖层实现(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="http://www.mamicode.com/#" 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">密&nbsp;码:</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="http://www.mamicode.com/登陆"/></td> </tr> </table> </div> <!-- 遮盖层 --> <div id="mid"></div> </body> <script type="text/javascript" src="http://www.mamicode.com/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>

 

遮盖层实现(jQuery+css+html)