遮盖层实现（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:%;

                left:%;

                z-index:;

                opacity:0.8;                        /*背景的透明度:(Firefox适用；）*/

                filter:alpha(opacity =);          /*背景的透明度:(IE适用)；*/

                }  

            /*遮罩层*/

            #mid{

                display:none;

                width:%;

                height:%;

                background:#;

                position:absolute;

                top:;

                left:;

                z-index:;

                opacity:0.4;                        /*背景的透明度:(Firefox适用；）*/

                filter:alpha(opacity =);          /*背景的透明度:(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）

最新文章

热门文章
