简单遮罩层

效果：

下载：/Files/Jaylong/遮罩层.rar

1、heml页面的源码：

 <script type="text/javascript" src="jquery-1.4.1.js"></script>
  <script type="text/javascript" src="Noname3.js"></script>
   <link rel="stylesheet" type="text/css" href="Noname2.css"> 

 <div id="con"><span id="click"><a href="#">点击我</a></span></div>
  <div id="shade">我是弹出的遮罩层
    <div id="closeBtn">关闭</div>
  </div>

2.css文件

 

 #con
         {
            margin:200px;
         }
        #shade
        {
            display: none;
            position: absolute;/*设置为绝对定位*/
            width: 400px;
            height: 200px;
            border: #bfe5b3 solid 1px;
            z-index: 200;/*设置层叠*/
            background: #fff;
        }
           /***遮罩层****/
        #greybackground
        {
            background: #000;
            display: block;
            z-index: 100;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #closeBtn
        {
             position: absolute;
            top: 10px;
            left: 340px;
        }

 

3.js代码

 

$(function () {
    var screenwidth, screenheight, mytop, getPosLeft, getPosTop
    screenwidth = $(window).width();
    screenheight = $(window).height();
    //获取滚动条距顶部的偏移
    mytop = $(document).scrollTop();
    //计算弹出层的left
    getPosLeft = screenwidth / 2 - 200;
    //计算弹出层的top
    getPosTop = screenheight / 2 - 150;
    //css定位弹出层
    $("#shade").css({ "left": getPosLeft, "top": getPosTop });
    //当浏览器窗口大小改变时
    $(window).resize(function () {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = screenwidth / 2 - 200;
        getPosTop = screenheight / 2 - 150;
        $("#shade").css({ "left": getPosLeft, "top": getPosTop + mytop });
    });
    //当拉动滚动条时，弹出层跟着移动
    $(window).scroll(function () {
        screenwidth = $(window).width();
        screenheight = $(window).height();
        mytop = $(document).scrollTop();
        getPosLeft = screenwidth / 2 - 200;
        getPosTop = screenheight / 2 - 100;
        $("#shade").css({ "left": getPosLeft, "top": getPosTop + mytop });
    });
    //点击链接弹出登录窗口
    $("#click").click(function () {
        $("#shade").fadeIn("slow"); //toggle("slow");    
        //获取页面文档的高度
        var docheight = $(document).height();
        //追加一个层，使背景变灰
        $("body").append("<div id='greybackground'></div>");
        $("#greybackground").css({ "opacity": "0.5", "height": docheight });
        return false;
    });
    //点击关闭按钮
    $("#closeBtn").click(function () {
        $("#shade").fadeOut("slow"); ////hide();
        //删除变灰的层
        $("#greybackground").remove();
        return false;
    });
});