jQuery点击弹出层弹出模态框点击模态框消失代码分享
废话不多说了,直接给大家贴代码了,具体代码如下所示:
<!DOCTYPEhtml> <html> <head> <title>jQuery弹出层模态框</title> <scriptsrc="./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> <scripttype="text/javascript"> $(function(){ //弹出隐藏层 functionShowDiv(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 }; //关闭弹出层 functionCloseDiv(show_div,bg_div) { document.getElementById(show_div).style.display='none'; document.getElementById(bg_div).style.display='none'; }; $(".btn").click(function(){ varsrc=$(this).attr("src"); $("#showcont").attr("src",src); ShowDiv('MyDiv','fade') }); $("#fade").click(function(){ CloseDiv('MyDiv','fade') }); }); </script> </head> <body> <!--<inputid="Button1"type="button"value="点击弹出层"onclick="ShowDiv('MyDiv','fade')"/>--> <!--图片请换成自己的,点击图片弹出--> <imgsrc="tu.png"alt="sd"class="btn"> <imgsrc="pic.jpg"alt="sd"class="btn"> <!--弹出层时背景层DIV--> <divid="fade"class="black_over"> </div> <!--弹出层的内容--> <divid="MyDiv"class="white_content"> <imgsrc="tu.png"alt=""id="showcont"> </div> </body> </html>
以上所述是小编给大家介绍的jQuery点击弹出层弹出模态框点击模态框消失代码分享,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!