jQuery点击弹出层，弹出模态框，点击模态框消失

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

<! 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%;                           z-index:1001;              top: 0;              left: 0;              right: 0;              left: 0;              margin: auto;                       }          .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 >

　　

转载于:https://www.cnblogs.com/wenJiaQi/p/6337610.html