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 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
js自制图片放大镜功能
Jan 24 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 Javascript
js实现点击生成随机div
Jan 16 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设计模式 Visitor 访问者模式
2011/06/28 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js树插件zTree获取所有选中节点数据的方法
2015/01/28 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
python读取二进制mnist实例详解
2017/05/31 Python
python编写分类决策树的代码
2017/12/21 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
HTML5进度条特效
2014/12/18 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
大学毕业感言一句话
2014/02/06 职场文书
小小的船教学反思
2014/02/21 职场文书
务工证明怎么写
2015/06/18 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书