馒头bun

用原生html、js、css实现，点击出现、关闭蒙版

主要是css属性 opacity、z-index、position的运用

话不多说，直接上代码

<html>  
<head>  
<style type="text/css">  
    .popWindow {  
        background-color:#9D9D9D;  
        width: 100%;  
        height: 100%;  
        left: 0;  
        top: 0;  
        filter: alpha(opacity=50);  //opacity，透明度；alpha通道，一个灰度通道，通常表示不同明度，
                                    //alpha是IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时两个都写，
        opacity: 0.5;  //透明度
        z-index: 1;    //指定一个元素的堆叠顺序,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
        position: absolute;  //指定一个元素（静态(默认值)static，相对relative，绝对absolute或固定fixed）的定位方法的类型
    }  
    .maskLayer {  
        background-color:#fff;  
        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>

posted on 2021-02-25 17:09  馒头bun  阅读(472)  评论(0)    收藏  举报

导航