<head runat=
"server"
>
<title>jQuery弹出层</title>
<script type=
"text/javascript"
src=
"js/jquery-1.3.2-min.js"
></script>
<script type=
"text/javascript"
>
$(
function
() {
$(
"#btnShow"
).click(
function
() {
$(
"#BgDiv"
).css({ display:
"block"
, height: $(document).height()});
var
yscroll = 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>
<style type=
"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
#8FA4F5 solid;
padding: 1px;
}
#DialogDiv h2
{
height: 25px;
font-size: 14px;
background-color:
#8FA4F5;
position: relative;
padding-left: 10px;
line-height: 25px;
}
#DialogDiv h2 a
{
position: absolute;
right: 5px;
font-size: 12px;
color:
#000000;
}
#DialogDiv .form
{
padding: 10px;
}
</style>
</head>
<body>
<form id=
"form1"
runat=
"server"
>
<div id=
"BgDiv"
></div>
<div id=
"DialogDiv"
style=
"display: none"
>
<h2>
弹出层<a href=
"#"
id=
"btnClose"
>关闭</a></h2>
<div class=
"form"
>
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
我是弹出对话框!!<br />
</div>
</div>
<p>
</p>
<p align=
"center"
>
<input value=
"弹出"
class=
"but"
type=
"button"
id=
"btnShow"
/>
</p>
</form>
</body>
</html>