jquery实现弹出层效果实例
更新时间：2015年05月19日 15:30:16 作者：张林春
这篇文章主要介绍了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程序设计有所帮助。
相关文章
基于jQuery的输入框在光标位置插入内容, 并选中功能的实现代码，需要的朋友可以参考下。2011-10-10
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
从后台获取json数据，将内容填充到下拉列表，页面做如何处理，接下来，通过本篇文章给大家实例讲解jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表，需要的朋友可以参考下2015-08-08
文字浮动提示效果想必大家都有见到过吧,下面为大家详细介绍下使用jquery是如何做到的,感兴趣的朋友可以参考下2013-12-12
jQuery基于ajax实现页面加载后检查用户登录状态的方法
这篇文章主要介绍了jQuery基于ajax实现页面加载后检查用户登录状态的方法,结合实例形式较为详细分析了jQuery结合ajax进行表单登陆验证操作的具体步骤与相关操作技巧,需要的朋友可以参考下2017-02-02
本文通过实例代码给大家分享了基于jQuery Easyui实现登陆框界面，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-07-07
jquery easyui datagrid实现增加，修改，删除方法总结
这篇文章主要介绍了jquery easyui datagrid实现增加，修改，删除方法,结合实例形式分析了jquery easyui datagrid结合asp.net实现数据的增删改等操作的步骤与相关技巧,需要的朋友可以参考下2016-05-05
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
给jQuery做过扩展或者制作过jQuery插件的人这两个方法东西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 这两个属性都是用于合并两个或多个对象的属性到target对象.2014-06-06
动态加载Javascript是一项非常强大且有用的技术。这方面的主题在网上已经讨论了不少，我也经常会在一些个人项目上使用RequireJS和Dojo加载js2014-04-04
jQuery没有直接支持form到json的序列化方法，目前网上有一个实现是这样的2010-12-12
Jquery Easyui分割按钮组件SplitButton使用详解（17）
这篇文章主要为大家详细介绍了Jquery Easyui分割按钮组件SplitButton的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论