javascript+html实现遮罩层效果

最新推荐文章于 2023-12-12 18:51:44 发布

一曲破东风

最新推荐文章于 2023-12-12 18:51:44 发布

阅读量3.2k

点赞数 1

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/u010407050/article/details/75331586

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>遮罩层实例</title>  
    </head>  
    <body>  
        <button onclick="coverDiv()">显示</button>  
    </body>  
    <script type="text/javascript">  
    //显示遮罩  
    function coverDiv(){    
        var procbg = document.createElement("div"); //首先创建一个div    
        procbg.setAttribute("id","mybg"); //定义该div的id    
        procbg.style.background = "#000000";    
        procbg.style.width = "100%";    
        procbg.style.height = "100%";    
        procbg.style.position = "fixed";    
        procbg.style.top = "0";    
        procbg.style.left = "0";    
        procbg.style.zIndex = "500";    
        procbg.style.opacity = "0.6";    
        procbg.style.filter = "Alpha(opacity=70)";    
        document.body.appendChild(procbg);    
    }    
    //取消遮罩    
    function hide() {    
        var body = document.getElementsByTagName("body");    
        var mybg = document.getElementById("mybg");    
        body[0].removeChild(mybg);    
    }  
    </script>  
</html>