首页 > 代码库 > 遮盖层实现(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">密 码:</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)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。