本篇内容主要讲解“怎么用js+css实现div遮罩层效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用js+css实现div遮罩层效果”吧!
网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、微信小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了下冶免费建站欢迎大家使用！
/* 半透明的遮罩层 */
#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;
}
/* 内容层 */
.MyAlertBox {
position: absolute;
/*z-index设置元素的堆叠顺序 仅能在定位元素上奏效（例如 position:absolute;）*/
z-index: 200;
width: 520px;
height: 349px;
}
/* 遮罩层关闭按钮默认样式 */
.closeBtn {
position: absolute;
z-index: 300;
width: 35px;
height: 20px;
cursor: pointer;
margin: -146px 220px;
background: url("<%=basePath %>common/imgs/cross_diy.png") no-repeat;
}
/* 遮罩层关闭按钮 */
.closeBtn_hover{
background: url("<%=basePath %>common/imgs/cross_diy_hover.png") no-repeat;
}
/*绑定单击事件*/
$(function(){
/*绑定单击事件*/
$("#loginBtn").click(function(){
showOverlay();
adjust("loginFrame");
adjust("closeBtn");
});
/*遮罩层关闭按钮*/
$("#closeBtn").click(function(){
hideOverlay();
});
/*遮罩层关闭按钮*/
$("#closeBtn").hover(function(){
$("#closeBtn").toggleClass("closeBtn_hover");
});
//当浏览器窗口大小改变时
$(window).resize(function () {
adjust("loginFrame");
adjust("closeBtn");
});
//当拉动滚动条时，弹出层和遮罩层跟着移动
$(window).scroll(function () {
adjust("loginFrame");
adjust("closeBtn");
//网页被卷去的左
myleft = $(document).scrollLeft();
//网页被卷去的高
mytop = $(document).scrollTop();
$("#overlay").css({ "left": myleft, "top": mytop });
});
});
/* 当前页面高度 */
function pageHeight() {
//return document.body.scrollHeight;
return window.availHeight;
}
/* 当前页面宽度 */
function pageWidth() {
//return document.body.scrollWidth;
return window.availWidth;
}
/* 显示遮罩层 */
function showOverlay() {
$("#overlay").height(pageHeight());
$("#overlay").width(pageWidth());
// fadeTo第一个参数为速度，第二个为透明度
// 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
$("#overlay").fadeTo(200, 0.5);
//为遮罩内容层添加样式
$("#loginFrame").css("display","block");
$("#loginFrame").addClass("MyAlertBox");
//为遮罩层关闭按钮添加样式
$("#closeBtn").css("display","block");
$("#closeBtn").addClass("closeBtn");
}
/* 隐藏遮罩层 */
function hideOverlay() {
$("#overlay").fadeOut(200);
$("#loginFrame").css("display","none");
$("#closeBtn").css("display","none");
}
//浏览器视口的高度
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight)
|| document.body.clientHeight;
}
//浏览器视口的宽度
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth)
|| document.body.clientWidth
}
/* 浏览器垂直滚动位置 */
function scrollY() {
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/* 浏览器水平滚动位置 */
function scrollX() {
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft)
|| document.body.scrollLeft;
}
/* 定位到页面中心 */
function adjust(id) {
var w = $("#"+id).width();
var h = $("#"+id).height();
var t = scrollY() + (windowHeight() / 2) - (h / 2);
var l = scrollX() + (windowWidth() / 2) - (w / 2);
$("#"+id).css( {
left : l + 'px',
top : t + 'px'
});
}
到此，相信大家对“怎么用js+css实现div遮罩层效果”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
网页名称：怎么用js+css实现div遮罩层效果
本文URL：
http://bjjierui.cn/article/jppcij.html
