jquery实现弹出层效果实例
本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下：
<headrunat="server">
<title>jQuery弹出层</title>
<scripttype="text/javascript"src="js/jquery-1.3.2-min.js"></script>
<scripttype="text/javascript">
$(function(){
$("#btnShow").click(function(){
//varstr="我是弹出对话框";
//$(".form").html(str);
$("#BgDiv").css({display:"block",height:$(document).height()});
varyscroll=document.documentElement.scrollTop;
$("#DialogDiv").css("top","100px");
$("#DialogDiv").css("display","block");
document.documentElement.scrollTop=0;
});
$("#btnClose").click(function(){
$("#BgDiv").css("display","none");
$("#DialogDiv").css("display","none");
});
});
</script>
<styletype="text/css">
body,h2
{
margin:0;
padding:0;
}
#BgDiv
{
background-color:#e3e3e3;
position:absolute;
z-index:99;
left:0;
top:0;
display:none;
width:100%;
height:1000px;
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
}
#DialogDiv
{
position:absolute;
width:400px;
left:50%;
top:50%;
margin-left:-200px;
height:auto;
z-index:100;
background-color:#fff;
border:1px#8FA4F5solid;
padding:1px;
}
#DialogDivh2
{
height:25px;
font-size:14px;
background-color:#8FA4F5;
position:relative;
padding-left:10px;
line-height:25px;
}
#DialogDivh2a
{
position:absolute;
right:5px;
font-size:12px;
color:#000000;
}
#DialogDiv.form
{
padding:10px;
}
</style>
</head>
<body>
<formid="form1"runat="server">
<divid="BgDiv"></div>
<divid="DialogDiv"style="display:none">
<h2>
弹出层<ahref="#"id="btnClose">关闭</a></h2>
<divclass="form">
我是弹出对话框!!<br/>
我是弹出对话框!!<br/>
我是弹出对话框!!<br/>
我是弹出对话框!!<br/>
我是弹出对话框!!<br/>
我是弹出对话框!!<br/>
我是弹出对话框!!<br/>
</div>
</div>
<p>
</p>
<palign="center">
<inputvalue="弹出"class="but"type="button"id="btnShow"/>
</p>
</form>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。