编程 Javascript

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点击弹出层弹出模态框点击模态框消失代码分享，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

- Author -

武侯668

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript函数重载解决方案分享

Feb 19 Javascript

兼容主流浏览器的JS复制内容到剪贴板

Dec 12 Javascript

jQuery统计指定子元素数量的方法

Mar 17 Javascript

JavaScript实现将数组数据添加到Select下拉框的方法

Aug 21 Javascript

JavaScript cookie 跨域访问之广告推广

Apr 20 Javascript

jQuery和JavaScript节点插入元素的方法对比

Nov 18 Javascript

微信小程序基础组件与导航组件详细介绍

Feb 21 Javascript

ES6中Generator与异步操作实例分析

Mar 31 Javascript

Vue下的国际化处理方法

Dec 18 Javascript

利用js-cookie实现前端设置缓存数据定时失效

Jun 18 Javascript

Vuex modules模式下mapState/mapMutations的操作实例

Oct 17 Javascript

Vue中引入svg图标的两种方式

Jan 14 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