码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-10-07 20:01:47      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:

<!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">密&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="登陆"/></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>

 

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

标签:

原文地址:http://www.cnblogs.com/caojiayan/p/5936379.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!