廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!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點擊彈出層彈出模態框點擊模態框消失代碼分享，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
