网页遮罩层

一般加入以下代码即可

//遮罩层
        function MaskForm(diplay) {         
            //获取页面文档的左边距
            var left = $("body").position().left;
            //获取页面文档的高度
            var docheight = $(document).height();
            //获取页面文档的宽度
            var docwidth = $(window).width();
           
            //追加一个层，使背景变灰
            $("body").append("<div id='greybackground'></div>");
            $("#greybackground")
                .css({
                    "opacity": "0.5",
                    "height": docheight,
                    "width": "100%",//docwidth,
                    "background": "#000",
                    "display": diplay,
                    "z-index": "100",
                    "position": "absolute",
                    "left": "0",
                    "top": "0"
                });
        }

如果要根据页面大小变化,需要加入

 

window.onresize = function () {             var screenwidth, screenheight             screenwidth = $(window).width();             screenheight = $(window).height();             $("#greybackground").css({ "width": screenwidth, "height": screenheight });         }

        window.onscroll = function () {             var screenwidth, screenheight             screenwidth = $(window).width() + getPageScroll().Left;             screenheight = $(window).height() + getPageScroll().Top;             $("#greybackground").css({ "width": screenwidth, "height": screenheight });         }

var getPageScroll = function () {
            var xScroll, yScroll;
            if (window.pageYOffset) {
                yScroll = window.pageYOffset;
                xScroll = window.pageXOffset;
            } else if (document.documentElement && document.documentElement.scrollTop) {
                yScroll = document.documentElement.scrollTop;
                xScroll = document.documentElement.scrollLeft;
            } else if (document.body) {
                yScroll = document.body.scrollTop;
                xScroll = document.body.scrollLeft;
            } else { }
            return { Left: xScroll, Top: yScroll };
        };       

           

           

 

另外页面中要加position=relative,最好加到<form>中，不要加到<body>中，否则会遮罩不住。

posted @ 2013-07-10 13:51  hml618  阅读(286)  评论(0)    收藏  举报