项目中点击弹出遮罩层引发的思考?

当我们在浏览网页的时候,经常回看到点击点击某个按钮或者超链接,然后弹出一个遮罩层,外面显示相关的内容让你填写或者查看,然后有一个关闭的按钮.特别是某些网站的登录和注册功能爱这么弄.再有空闲时间的时候,我对这个效果进行了相关的测试,并做了一点相关的记录,方便以后查看,现在将其代码贴出来吧.点击运行按钮就可查看效果,主要是css中z-index的层叠顺序,和滤镜的相关的知识点,以及基础的jquery知识点.点击链接查看下效果

demo1 demo2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Jquery操作复选框!</title>
    <script type="text/javascript" src="http://901web.com/Mylab/lib/jquery-1.10.2.min.js"></script>
    <style type="text/css">
    *{margin:0;padding:0;}
    body{text-align: center;}
    .show{margin:10px auto;width:150px;text-align: center;}
    .mask {background-color: rgb(0, 0, 0);display:none;opacity: 0.7; /* Safari, Opera */-moz-opacity:0.70; /* FireFox */filter: alpha(opacity=70); /* IE */ z-index: 100;height: 100%;width: 100%;background-repeat:repeat;position:fixed;top: 0px;left: 0px;}
       .plogin{width: 498px;overflow: hidden;border: 1px solid #cfd7df;position: absolute;z-index:101;}
       .phd{ height:50px;overflow:hidden; background:#ff6b25;}
       .phd .name{ display:block; float:left; text-align:center; overflow:hidden; line-height:50px; color:#fff; font-weight:bold; font-size:20px; font-family:微软雅黑;text-indent:20px; }
       .phd .close{ display:block;width:50px;height:50px; background-position:-60px -30px; float:right;line-height:50px;}
       .pbd{width: 400px;height: 128px;overflow: hidden;padding: 60px;background: #fcfcfc;}
    </style>
    <script type="text/javascript">
    $(function(){
        $('.show').on('click',function() {
            $("#mask").show();
            $(".plogin").show();
        });
        var left = ($(window).width()-498)/2;
        var top = ($(window).height()-300)/2;
        $(".plogin").css({"top":top,"left":left});
        window.onresize = function(){
            var left = ($(window).width()-498)/2;
            var top = ($(window).height()-300)/2;
            $(".plogin").css({"top":top,"left":left});
            console.log($(window).width()+'--'+$(window).height());    
        }
        $('.close').on('click',function() {
            $(".plogin").hide();
            $("#mask").hide();
        })
    })
    </script>
</head>
<body>
    <div id="mask" class="mask"></div>
    <div class="plogin" style="display:none;">
        <div class="phd"><span class="name">弹出层标题部分</span><a href="#" class="close icons" title="关闭">X</a></div>
        <div class="pbd">中间内容部分</div> 
    </div>
    <button class="show">点击显示遮罩层</button>
</body>
</html>

901web前端博客

项目中点击弹出遮罩层引发的思考?

Comments