jquery实现弹出层效果实例


Posted in Javascript onMay 19, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
js弹出窗口返回值的简单实例
May 28 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
Vue.use源码学习小结
Jun 20 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 #Javascript
jQuery实现在列表的首行添加数据
May 19 #Javascript
jQuery中 prop() attr()使用详解
May 19 #Javascript
javascript实现获取服务器时间
May 19 #Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 #Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 #Javascript
7个有用的jQuery代码片段分享
May 19 #Javascript
You might like
php 定界符格式引起的错误
2011/05/24 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
谈谈如何手动释放Python的内存
2016/12/17 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
Python lambda表达式用法实例分析
2018/12/25 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
《十六年前的回忆》教学反思
2014/02/14 职场文书
开学典礼感言
2014/02/16 职场文书
大学生职业生涯规划书汇总
2014/03/20 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
python源码剖析之PyObject详解
2021/05/18 Python
Java spring单点登录系统
2021/09/04 Java/Android