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 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
利用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
第六节--访问属性和方法
2006/11/16 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php二维码生成以及下载实现
2017/09/28 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
基于node实现websocket协议
2016/04/25 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
JS中的多态实例详解
2017/10/15 Javascript
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
小程序server请求微信服务器超时的解决方法
2019/05/21 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
python字符串排序方法
2014/08/29 Python
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python 加密的实例详解
2017/10/09 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python 剪绳子的多种思路实现(动态规划和贪心)
2020/02/24 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
怎么处理XML的中文问题
2015/03/26 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle