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 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
Javascript Object.extend
May 18 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
vue路由插件之vue-route
Jun 13 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 Javascript
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生成静态html文件的三种方法
2013/06/18 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
js压缩利器
2007/02/20 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
学习并汇集javascript匿名函数
2010/11/25 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
2012/01/15 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python中property和setter装饰器用法
2019/12/19 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
JDK安装目录下有哪些内容
2014/08/25 面试题
生产车间主管岗位职责
2013/12/28 职场文书
共产党员公开承诺书
2014/03/25 职场文书
档案接收函格式
2015/01/30 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL