jQuery实现的AJAX简单弹出层效果代码
2015-11-26 15:53
1021 查看
本文实例讲述了jQuery实现的AJAX简单弹出层效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <style type="text/css"> <!-- html, body { height: 100%; margin: 0px; font-size: 12px; } .mydiv { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 99; width: 300px; height: 120px; left: 50%; /*FF IE7*/ top: 50%; /*FF IE7*/ margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */ margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/ margin-top: 0px; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } .mydiv2 { background-color: #FFCC66; border: 1px solid #f00; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 99; width: 400px; height: 400px; left: 50%; /*FF IE7*/ top: 50%; /*FF IE7*/ margin-left: -200px !important; /*FF IE7 该值为本身宽的一半 */ margin-top: -200px !important; /*FF IE7 该值为本身高的一半*/ margin-top: 0px; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } .bg { background-color: #666; width: 100%; height: 100%; left: 0; top: 0; /*FF IE7*/ filter: alpha(opacity=50); /*IE*/ opacity: 0.5; /*FF*/ z-index: 1; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/ document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/ } -- ></style> <script language="javascript" type="text/javascript"> function showDiv() { $('#popDiv').removeClass().addClass("mydiv").css("display","block").css("background","ff9"); $('#bg').css("display","block"); } function showDiv2() { $('#popDiv').removeClass().addClass("mydiv2").css("display","block").css("background","pink"); $('#bg').css("display","block"); } function closeDiv() { $('#popDiv').css("display","none"); $('#bg').css("display","none"); } </script> </head> <body onload="$('#bg').css('height',document.body.clientHeight).css('width',document.body.clientWidth); "> <div id="popDiv" class="mydiv" style="display: none;"> 动态弹出的层<br /> 动态弹层的内容<br /> <a href="javascript:closeDiv()">关闭窗口</a></div> <div id="bg" class="bg" style="display: none;"> </div> <div style="height: 1400px;"> <div style="text-align: center;"> <a href="javascript:showDiv()">点我1</a><br/><br/> <a href="javascript:showDiv2()">点我2</a> </div> </div> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- JavaScript 各种遍历方式详解
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 再谈Jquery Ajax方法传递到action(补充)
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法