怎么用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遮罩層效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！