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

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

<style type="text/css">

#overlay {
    background: #000;
    filter: alpha(opacity =   50); 
    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: 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遮罩层效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！