怎么用js+css实现div遮罩层效果

本篇内容主要讲解“怎么用js+css实现div遮罩层效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用js+css实现div遮罩层效果”吧!

<style type="text/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;
}
/* 内容层 */
.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;
}
</style>

<script type="text/javascript">
/*绑定单击事件*/
$(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'
    });
}
</script>

到此，相信大家对“怎么用js+css实现div遮罩层效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！