jQuery点击弹出层弹出模态框点击模态框消失代码分享
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!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>
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17