jQuery实现的AJAX简单弹出层效果代码


Posted in Javascript onNovember 26, 2015

本文实例讲述了jQuery实现的AJAX简单弹出层效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

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程序设计有所帮助。

Javascript 相关文章推荐
Iframe thickbox2.0使用的方法
Mar 05 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
JS解析XML实例分析
Jan 30 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
简单谈谈React中的路由系统
Jul 25 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
js检测iframe是否加载完成的方法
Nov 26 #Javascript
学习JavaScript设计模式(策略模式)
Nov 26 #Javascript
深入浅析同源策略和跨域访问
Nov 26 #Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 #Javascript
学习JavaScript设计模式(单例模式)
Nov 26 #Javascript
javascript bom是什么及bom和dom的区别
Nov 26 #Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 #Javascript
You might like
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php程序内部post数据的方法
2015/03/31 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
python中zip()方法应用实例分析
2016/04/16 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python assert关键字原理及实例解析
2019/12/13 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
高中语文教学反思
2014/01/16 职场文书
合伙协议书
2014/04/23 职场文书
十佳护士先进事迹
2014/05/08 职场文书
体操比赛口号
2014/06/10 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技