遮罩效果的实现

很多时候我们需要用到遮罩弹出层效果，下面给出一个简单的遮罩demo；

效果演示

 

 

 

demo代码

注意引入jquery

<html>
<head>
<meta charset="utf-8">
<title>遮罩</title>
 <script src='jquery-1.8.3.min.js'></script>
<style>
    #BackShade {
        width: 100%;
        height: 100%;
        background-color: #000;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        opacity: 0.3;
        /*兼容IE8及以下版本浏览器*/
        filter: alpha(opacity=30);
        display: none;
    }
    #dialogInfo {
        width: 300px;
        height: 400px;
        background-color: #fff;
        margin: auto;
        position: absolute;
        z-index: 10000;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        border-radius:10px;
    }
</style>
</head>
<body>
<div style="text-align:center;margin-top:150px;"><button id="btn" onclick="openShade()">打开遮罩层</button></div>
<div id="BackShade"></div>
<div id="dialogInfo">
    <div style="height:50px;background-color:#FC5E00">
        <div style="padding-top:10px;height:30px;line-height:30px;color:#fff;text-align:center;">遮罩Demo</div>
    </div>
 <div style="height:200px;font-size: 14px; border-bottom: 1px solid #e0e0e0; padding: 25px;">
        遮罩
 </div>
 <div id="dialogClose" onclick="closeShade()" style="margin-top: 10px; text-align: center; line-height: 28px; height: 28px; color: #777;">关闭</div>
</div>
</body>
<script>
function openShade() {
                    $("#BackShade").css("display", "block");
                    $("#dialogInfo").css("display", "block");
                    //控制底部内容不能拖动
                    $("body,#dataList").height($(window).height()).css({
                        "overflow-y": "hidden"
                    });
                }
function closeShade() {
                    $("#BackShade").css("display", "none");
                    $("#dialogInfo").css("display", "none");
                    //控制底部内容可拖动
                    $("body,#dataList").height($(window).height()).css({
                        "overflow-y": "auto"
                   });
                }
</script>

 

posted on 2017-10-09 16:32  yxtic  阅读(720)  评论(0)  编辑  收藏  举报