jQuery实现弹出层效果


Posted in jQuery onDecember 10, 2019

本文实例为大家分享了jQuery实现弹出层的具体代码,供大家参考,具体内容如下

###jQuery实现 弹出层效果

点击弹出层:弹出弹出层
点击阴影:关闭弹出层
点击“关闭”关闭弹出层

jQuery实现弹出层效果

jQuery实现弹出层效果

整体代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery弹出层效果</title>
 <style>
  .black_overlay {
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index: 1001;
   -moz-opacity: 0.8;
   opacity: .80;
   filter: alpha(opacity=80);
  }

  .white_content {
   display: none;
   position: absolute;
   top: 10%;
   left: 10%;
   width: 80%;
   height: 80%;
   border: 16px solid lightblue;
   background-color: white;
   z-index: 1002;
   overflow: auto;
  }

  .white_content_small {
   display: none;
   position: absolute;
   top: 20%;
   left: 30%;
   width: 40%;
   height: 50%;
   border: 16px solid lightblue;
   background-color: white;
   z-index: 1002;
   overflow: auto;
  }
 </style>
 <script type="text/javascript">
  //弹出隐藏层
  function ShowDiv(show_div, bg_div) {
   document.getElementById(show_div).style.display = 'block';
   document.getElementById(bg_div).style.display = 'block';
   var bgdiv = document.getElementById(bg_div);
   bgdiv.style.width = document.body.scrollWidth;
   // bgdiv.style.height = $(document).height();
   $("#" + bg_div).height($(document).height());
  };
  //关闭弹出层
  function CloseDiv(show_div, bg_div) {
   document.getElementById(show_div).style.display = 'none';
   document.getElementById(bg_div).style.display = 'none';
  };
 </script>
</head>

<body>
 <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
 <!--弹出层时背景层DIV-->
 <div id="fade" class="black_overlay" onclick="CloseDiv('MyDiv','fade')">
 </div>
 <div id="MyDiv" class="white_content">
  <div style="text-align: right; cursor: default; height: 40px;">
   <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
  </div>
  目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
 </div>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery滑动效果实现方法分析
Sep 05 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jquery实现简易验证插件封装
Sep 13 jQuery
JQuery样式与属性设置方法分析
Dec 07 #jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 #jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 #jQuery
jQuery轮播图功能制作方法详解
Dec 03 #jQuery
jQuery实现弹幕特效
Nov 29 #jQuery
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
You might like
PHP 表单提交给自己
2008/07/24 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
PHP实现对xml的增删改查操作案例分析
2017/05/19 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
2013/06/05 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
js实现tab切换效果
2017/02/16 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python读写ini文件的方法
2015/05/28 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
简单而又朴实的个人求职信分享
2013/12/12 职场文书
高一家长会邀请函
2014/01/12 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
违章停车检讨书
2014/10/21 职场文书
小学生作文评语集锦
2014/12/25 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS