用javascript为页面添加蒙版效果和弹出层

最新推荐文章于 2021-08-26 19:11:57 发布

毛球Josey

最新推荐文章于 2021-08-26 19:11:57 发布

阅读量6.1k

点赞数 2

分类专栏：学习笔记文章标签： javascript 蒙版

本文链接：https://blog.csdn.net/joseydon/article/details/80025624

版权

学习笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

用javascript为页面添加蒙版效果和弹出层

id为popWindow的div就是蒙版层，id为maskWindow的div是弹出层。

<html>  
<head>  
<style type="text/css">  
    .popWindow {  
        background-color:#9D9D9D;  
        width: 100%;  
        height: 100%;  
        left: 0;  
        top: 0;  
        filter: alpha(opacity=50);  
        opacity: 0.5;  
        z-index: 1;  
        position: absolute;  

    }  
    .maskLayer {  
        background-color:#000;  
        width: 200px;  
        height: 30px;  
        line-height: 30px;  
        left: 50%;  
        top: 50%;  
        color:#fff;  
        z-index: 2;  
        position: absolute;  
        text-align:center;  
    }  
</style>  
<script language="javascript" type="text/javascript">  

    function showDiv() {  
        document.getElementById('popWindow').style.display = 'block';  
        document.getElementById('maskLayer').style.display = 'block';        
    }  
    function closeDiv() {  
        document.getElementById('popWindow').style.display = 'none';  
        document.getElementById('maskLayer').style.display = 'none';  
    }  
</script>  
</head>  
<body>  
    <div onclick="showDiv()" style="display:block; cursor:pointer">  
            弹出蒙板  
    </div>  
    <div id="popWindow" class="popWindow" style="display: none;">  
    </div>  
    <div id="maskLayer" class="maskLayer" style="display: none;">  
          <a href="#" onclick="closeDiv()"  style="cursor:pointer;text-decoration: none;">  
              关闭蒙板   
          </a>  
    </div>  
</body>  
</html>