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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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学习之PHP变量
2006/10/09 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
PHP中的self关键字详解
2019/06/23 PHP
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Move.js入门
2017/02/08 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
在Python中关于中文编码问题的处理建议
2015/04/08 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python判断两个对象相等的原理
2017/12/12 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
python使用xlrd模块读取xlsx文件中的ip方法
2019/01/11 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
python中加背景音乐如何操作
2020/07/19 Python
如何利用pycharm进行代码更新比较
2020/11/04 Python
实习生自我鉴定
2013/12/12 职场文书
十八大感想感言
2014/02/10 职场文书
超市重阳节活动方案
2014/02/10 职场文书
护士找工作求职信
2014/07/02 职场文书
2014年部门工作总结
2014/11/12 职场文书
创业计划书详解
2019/07/19 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers