遮罩的简单实现
遮罩在网页应用中是很常见的一种功能,很多刚接触的朋友都不知道怎么实现:这里给出一个简单的demo,希望可以帮助到大家。
实现思路:就是在页面放置一个z-index很高的div。(div中不要放置任何东西),通过js,来动态的设置div的高度和宽度。然后再通过css给div设置背景色,透明度等;下面是关键代码:
在页面加入:
<div id="overlay"></div>
css代码:
/* 半透明的遮罩层 */
#overlay {
background: #000;
filter: alpha(opacity=50); /* IE的透明度 */
opacity: 0.5; /* 透明度 */
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100; /* 此处的图层要大于页面 */
display:none;
}
js代码(基于jquery):
//点击按钮弹出遮罩
$(function(){
$("#btn1").click(function(){
showOverlay();
});
/* 显示遮罩层 */
function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());
// fadeTo第一个参数为速度,第二个为透明度
// 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
$("#overlay").fadeTo(200, 0.5);
}
/* 隐藏覆盖层 */
function hideOverlay() {
$("#overlay").fadeOut(200);
}
/* 当前页面高度 */
function bodyHeight() {
return document.body.scrollHeight;
}
/* 当前页面宽度 */
function bodyWidth() {
return document.body.scrollWidth;
}
/* 当前浏览器的宽度*/
function pageHeight() {
return window.screen.availHeight;
}
/* 当前浏览器的宽度*/
function pageWidth() {
return window.screen.availWidth;
}
}