网页遮罩层
一般加入以下代码即可
//遮罩层
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>中，否则会遮罩不住。
