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