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时间下拉框小例子
Apr 15 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
JS hashMap实例详解
May 26 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
js实现双色球效果
Aug 02 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
Oct 29 Javascript
CocosCreator入门教程之网络通信
Apr 16 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解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
2016/04/14 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
hammer.js实现图片手势放大效果
2017/08/29 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
Python 学习教程之networkx
2019/04/15 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
精神病医院见习报告
2014/11/03 职场文书
2015年试用期工作总结
2014/12/12 职场文书
亮剑观后感
2015/06/05 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js