遮罩层实现方式 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>html 最简遮罩层</title>  
<style>
    #popDiv{
        z-index:99;
        display:none;
        position:absolute;
        margin-top:8.86rem;
        width:100%;
    }
    #bg{
        display:none;
        background-color: #313131;
        width: 100%;
        position:absolute;
        height: 100%;
        opacity: 0.5;
        z-index: 1;
    }
    .photograph{
        background: #FFFFFF;
        margin: 0 0.18rem 0.18rem 0.18rem;
        text-align: center;
        border: 1px solid #FFFFFF;
        border-radius: .3rem;
    }
    .album_cancel{
        background: #FFFFFF;
        text-align: center;
        border: 1px solid #FFFFFF;
        border-radius: .3rem;
        display: block;
        margin: 0 0.18rem;
        color:#0b5ab3;
        font-weight:bolder;
        font-size:.36rem;
        height: 1rem;
        line-height:1rem;
    }
    .photograph p{
        color: #999999;
        font-size:.24rem;
        font-weight: bolder;
        height:0.6rem;
        line-height:0.6rem;
        margin:0;
    }
    .photograph hr{
        margin: 0;
    }
    .photograph span{
        color:#0b5ab3;
        font-weight:bolder;
        font-size:.36rem;
        width: 100%;
        display: block;
        height: 1rem;
        line-height:1rem;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>  
<body>  
<div id="popDiv">
    <div class="photograph">
        <p>提交汇款回单照片</p>
        <hr/>
        <span class="photo_submit">拍照上传</span>
    </div>
    <span class="album_cancel">取消</span>
</div>
<div id="bg"></div>

<div style="padding-top: 10%;padding-left:40%;z-index:1;">  
<input type="button" value="打开遮罩层" class="submit_proof" />  
</div>  
</body>  
<script type="text/javascript">  
    //遮罩效果
    $('.submit_proof').click(function(){
        document.getElementById('popDiv').style.display='block';
        document.getElementById('bg').style.display='block';
    });
    $('.album_cancel').click(function(){
        document.getElementById('popDiv').style.display='none';
        document.getElementById('bg').style.display='none';
    });
</script>  
</html>

 效果如图：

posted on 2018-06-19 18:42  爱吃柠檬不加糖  阅读(222)  评论(0)  编辑  收藏  举报

导航