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 学习笔记(onchange等)
Nov 14 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
vue构建单页面应用实战
Apr 10 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 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
php实现mysql数据库操作类分享
2014/02/14 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
js常用代码段整理
2011/11/30 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python映射列表实例分析
2015/01/26 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
Python使用ffmpy将amr格式的音频转化为mp3格式的例子
2019/08/08 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
教师群众路线剖析材料
2014/09/29 职场文书
先进工作者个人总结
2015/02/15 职场文书
演讲开场白和结束语
2015/05/29 职场文书
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python