读书人

简略jquery遮罩层

发布时间: 2012-09-10 11:02:32 作者: rapoo

简单jquery遮罩层

?

 #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;}
<div id="brg">    </div>    <div id="showdiv">        <div id="close">            关闭        </div>        <div id="testdiv">  要显示的内容        </div>    </div>

?

$(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");            });        });

读书人网 >Web前端

热点推荐