jquery实现弹出层效果实例
编程学习 2021-07-04 21:48www.dzhlxh.cn编程入门
这篇文章主要介绍了jquery实现弹出层效果的方法,实例分析了jQuery实现弹出层的技巧,涉及jQuery操作页面元素与样式的技巧,需要的朋友可以参考下
本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下：
<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() {
// var str = "我是弹出对话框";
// $(".form").html(str);
$("#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>
希望本文所述对大家的jQuery程序设计有所帮助。