很多时候我们需要用到遮罩弹出层效果，下面给出一个简单的遮罩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>