遮罩层DEMO

来源：互联网发布：淘宝苹果id解锁可信吗编辑：程序博客网时间：2024/06/08 07:28
来自：http://my.oschina.net/u/246503/blog/42330
<!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>    <title></title>    <style type="text/css">        #brg        {            width: 100%;            height: 100%;            background: #333;            position: absolute;            top: 0;            left: 0;            filter: alpha(opacity=60);            -moz-opacity: 0.6;            opacity: 0.6;            position: absolute;            top: 0;            left: 0;            display: none;        }        #showdiv        {            width: 100%;            height: auto;            position: absolute;            left: 300px;            top: 150px;            z-index: 330;            display: none;        }        #testdiv        {            width: 800px;            height: auto;            margin: 0 0;            border: 1px solid #4d4d4d;            background: #f2f2f2;        }        #close        {            width: 200px;            height: 27px;            line-height: 27px;            font-size: 14px;            font-weight: bold;            border: 1px solid #4d4d4d;            text-align: center;            cursor: pointer;            margin: 0 auto;            background: #333;            color: #fff;        }    </style>    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>    <script type="text/javascript">        $(document).ready(function() {            var bheight = document.body.clientHeight;            $("#btnAdd").click(function() {                $("#brg").css("display", "block");                $("#showdiv").css("display", "block");                $("#brg").css("height", document.body.scrollHeight);                $("#showdiv").css("top", document.body.scrollTop + 100);            });            $("#close").click(function() {                $("#brg").css("display", "none");                $("#showdiv").css("display", "none");            });        });    </script></head><body>    <button id="btnAdd">        button</button>    this is the test    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <br />    <!-- 遮罩层DEMO-->    <div id="brg">    </div>    <div id="showdiv">        <div id="close">            关闭        </div>        <div id="testdiv">            要显示的内容        </div>    </div>    <!-- END遮罩层DEMO--></body></html>