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实现简单的手风琴效果
Apr 17 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 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数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JavaScript字符串对象
2017/01/14 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
python调用shell的方法
2013/11/20 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
水电工岗位职责
2014/02/12 职场文书
初三学习决心书
2014/03/11 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
期中考试反思800字
2014/05/01 职场文书
工作岗位说明书模板
2014/05/09 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
部队2014年终工作总结
2014/11/27 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
入党培养人考察意见
2015/06/08 职场文书
大学生读书笔记大全
2015/07/01 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS