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 相关文章推荐
jQuery和AngularJS的区别浅析
Jan 29 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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操作excel文件 基于phpexcel
2010/07/02 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
移动端界面的适配
2017/01/11 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python模块学习 filecmp 文件比较
2012/08/27 Python
python实现log日志的示例代码
2018/04/28 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python中的&amp;&amp;及||的实现示例
2019/08/07 Python
如何教少儿学习Python编程
2020/07/10 Python
Python中Qslider控件实操详解
2021/02/20 Python
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
公司贷款承诺书
2014/05/30 职场文书
励志演讲稿200字
2014/08/21 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
MySQL慢查询的坑
2021/04/28 MySQL
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
MySQL分库分表详情
2021/09/25 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers