jQuery点击弹出层弹出模态框点击模态框消失代码分享


Posted in Javascript onJanuary 21, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
 <title>jQuery弹出层 模态框</title>
 <script src="./jquery.min.js" type="text/javascript"></script>
 <style>
  .btn{
   height:100px;
  }
  .black_over{
   display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   top: 0;
   left: 0;
   right: 0;
   left: 0;
   margin: auto;
   background-color: rgba(0,0,0,0.8);
  }
  .white_content {
   display: none;
   position: fixed;
   z-index:1002;
   overflow: auto;
  }
 </style>
 <script type="text/javascript">
  $(function () {
   //弹出隐藏层
   function ShowDiv(show_div,bg_div){
    document.getElementById(show_div).style.display='block';
    document.getElementById(bg_div).style.display='block' ;
    var _windowHeight = $(window).height(),//获取当前窗口高度
      _windowWidth = $(window).width(),//获取当前窗口宽度
      _popupHeight = $("#"+show_div).height(),//获取弹出层高度
      _popupWeight = $("#"+show_div).width();//获取弹出层宽度
    _posiTop = (_windowHeight - _popupHeight)/2;
    _posiLeft = (_windowWidth - _popupWeight)/2;
    $("#"+show_div).css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
   };
   //关闭弹出层
   function CloseDiv(show_div,bg_div)
   {
    document.getElementById(show_div).style.display='none';
    document.getElementById(bg_div).style.display='none';
   };
   $(".btn").click(function () {
    var src = $(this).attr("src");
    $("#showcont").attr("src",src);
    ShowDiv('MyDiv','fade')
   });
   $("#fade").click(function () {
    CloseDiv('MyDiv','fade')
   });
  });
 </script>
</head>
<body>
<!--<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />-->
<!--图片请换成自己的,点击图片弹出-->
<img src="tu.png" alt="sd" class="btn" >
<img src="pic.jpg" alt="sd" class="btn" >
<!--弹出层时背景层DIV-->
<div id="fade" class="black_over">
</div>
<!--弹出层的内容-->
<div id="MyDiv" class="white_content">
<img src="tu.png" alt="" id="showcont">
</div>
</body>
</html>

以上所述是小编给大家介绍的jQuery点击弹出层弹出模态框点击模态框消失代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
Mar 06 Javascript
Node.js Express安装与使用教程
May 11 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
利用transition实现文字上下抖动的效果
Jan 21 #Javascript
jQuery Ajax实现跨域请求
Jan 21 #Javascript
three.js快速入门【推荐】
Jan 21 #Javascript
详解Angualr 组件间通信
Jan 21 #Javascript
js的三种继承方式详解
Jan 21 #Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 #Javascript
微信小程序 自定义对话框实例详解
Jan 20 #Javascript
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
json中换行符的处理方法示例介绍
2014/06/10 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
layui中使用jquery控制radio选中事件的示例代码
2018/08/15 jQuery
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
2019/01/23 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
对python判断ip是否可达的实例详解
2019/01/31 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
Python处理PDF与CDF实例
2020/02/26 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
SQL Server笔试题
2012/01/10 面试题
教师网络培训感言
2014/03/09 职场文书
婚假请假条怎么写
2014/04/10 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python