怎么用js+css實(shí)現div遮罩層效果

本篇內容主要講解“怎么用js+css實(shí)現div遮罩層效果”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強。下面就讓小編來(lái)帶大家學(xué)習“怎么用js+css實(shí)現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; /* 此處的圖層要大于頁(yè)面 */
    display: none;
}
/* 內容層 */
.MyAlertBox {
    position: absolute;
    /*z-index設置元素的堆疊順序 僅能在定位元素上奏效（例如 position:absolute;）*/
    z-index: 200;
    width: 520px;
    height: 349px;
}
/* 遮罩層關(guān)閉按鈕默認樣式 */
.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;
}
/* 遮罩層關(guān)閉按鈕 */
.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");
    });
    /*遮罩層關(guān)閉按鈕*/
    $("#closeBtn").click(function(){
        hideOverlay();
    });
    /*遮罩層關(guān)閉按鈕*/
    $("#closeBtn").hover(function(){
        $("#closeBtn").toggleClass("closeBtn_hover");
    });
    //當瀏覽器窗口大小改變時(shí)
    $(window).resize(function () {
        adjust("loginFrame");
        adjust("closeBtn");
    });
    //當拉動(dòng)滾動(dòng)條時(shí)，彈出層和遮罩層跟著(zhù)移動(dòng)
    $(window).scroll(function () {
        adjust("loginFrame");
        adjust("closeBtn");
        //網(wǎng)頁(yè)被卷去的左
        myleft = $(document).scrollLeft();
        //網(wǎng)頁(yè)被卷去的高
        mytop = $(document).scrollTop();
        $("#overlay").css({ "left": myleft, "top": mytop });
    });
});
/* 當前頁(yè)面高度 */
function pageHeight() {
    //return document.body.scrollHeight;
    return window.availHeight;
}
/* 當前頁(yè)面寬度 */
function pageWidth() {
    //return document.body.scrollWidth;
    return window.availWidth;
}
/* 顯示遮罩層 */
function showOverlay() {
    $("#overlay").height(pageHeight());
    $("#overlay").width(pageWidth());
    // fadeTo第一個(gè)參數為速度，第二個(gè)為透明度
    // 多重方式控制透明度，保證兼容性，但也帶來(lái)修改麻煩的問(wèn)題
    $("#overlay").fadeTo(200, 0.5);
    //為遮罩內容層添加樣式
    $("#loginFrame").css("display","block");
    $("#loginFrame").addClass("MyAlertBox");
    //為遮罩層關(guān)閉按鈕添加樣式
    $("#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
}
/* 瀏覽器垂直滾動(dòng)位置 */
function scrollY() {
    var de = document.documentElement;
    return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/* 瀏覽器水平滾動(dòng)位置 */
function scrollX() {
    var de = document.documentElement;
    return self.pageXOffset || (de && de.scrollLeft)
            || document.body.scrollLeft;
}
/* 定位到頁(yè)面中心 */
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>