简易html遮罩层实例,简单的Jquery遮罩层代码实例

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;

}

Html 代码

关闭

要显示的内容

Jquery 代码

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

});

});