単純な Jquery マスク レイヤー コード example_jquery

Css代码

复制代記入代码如下:

#brg
{
幅: 100%;
高さ: 100%;
背景: #333;
位置: 絶対;
上: 0;
左: 0;
フィルター: アルファ(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
position: 絶対;
top: 0;
left: 0;
display: none ;
}
#showdiv
{
幅: 100%;
高さ: 自動;
位置: 絶対;
左: 300 ピクセル;
上: 150 ピクセル;
z-index: 330;
display: none;
}
#testdiv
{
width: 800px;
height: auto;
margin: 0 0 ;
border: 1px ソリッド #4d4d4d;
background: #f2f2f2;
}
#close
{
width: 200px;
height: 27px;
line -高さ: 27px;
font-size: 14px;
font-weight: 太字;
border: 1px 実線 #4d4d4d;
text-align: center;
cursor: pointer;
マージン: 0 自動;
背景: #333;
カラー: #fff;
}

Html 代码

复制代代码如下:

＆lt;/div＆gt;
＆lt; div id =" showdiv "＆gt;
＆lt; div id =" close "＆gt;

要表示内容

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