功能介绍：
1.点击按钮，出现弹窗，和蒙版
2.购物车数量显示1件商品
3.点击右上角关闭按钮，关闭弹窗，蒙版消失
4.点击继续购物按钮，弹窗消失，蒙版消失
5.点击去购物车按钮，跳转页面
6.点击蒙版，弹窗和蒙版都消失
7.再次点击加入购物车，购物车中数量递增
HTML所有代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹窗 蒙版 赋值</title>
<style>
body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,code,form,input,textarea,p,th,td,fieldset,legend,figure{
margin:0;
padding:0;
}
body,html{
width: 100%;
}
body{
font-family:"微软雅黑",Arial;
overflow-x:hidden;
}
ul,ol{
list-style:none;
}
a{
text-decoration:none;
}
img{
border:0;
}
.shopcarAdd{
display: block;
background-color: transparent;
outline: none;
width: 150px;
height: 40px;
background: orange;
color: white;
border: none;
text-align: center;
line-height: 40px;
margin:200px auto;
cursor: pointer;
}
.mask{
width: 100%;
height: 100%;
background: black;
opacity: 0.5;
z-index: 2;
position: absolute;
top:0;
display: none;
}
.tanchuang{
width: 500px;
height: 400px;
background-color: white;
position: fixed;
top:50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
display: none;
z-index: 20;
}
.close{
width: 100%;
height: 40px;
background: #353537;
}
.close span{
display: block;
width:20px;
height: 20px;
background: white;
float: right;
text-align: center;
line-height: 20px;
margin-top: 10px;
margin-right: 10px;
cursor: pointer;
}
.add{
margin-top: 100px;
text-align: center;
}
.add p{
margin-bottom: 10px;
}
.go{
margin-left: 140px;
margin-top: 70px;
}
.go a{
display: block;
width: 100px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
}
.goOn{
display: block;
width: 100px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
border: 1px solid #fb9d46;
color: #fb9d46;
margin-right: 20px;
background: white;
cursor: pointer;
}
.go a:last-child{
height: 40px;
background: #fb9d46;
color: white;
}
</style>
</head>
<body>
<button class="shopcarAdd">
加入购入车
</button>
<div class="mask"></div>
<div class="tanchuang">
<div class="close">
<span class="close1">x</span>
</div>
<div class="add">
<p>商品已成功添加到购物车</p>
<p>购物车一共有<span id="mun">0</span>件商品</p>
</div>
<div class="go">
<button class="goOn">继续购物</button>
<a href="http://www.taobao.com">去购物车</a>
</div>
</div>
</body>
</html>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(".close1").click(function(){
$(".tanchuang").css("display","none");
$(".mask").css("display","none");
});
$(".goOn").click(function(){
$(".tanchuang").css("display","none");
$(".mask").css("display","none");
});
var nums = 0;
var spans = $("#mun");
$(".shopcarAdd").click(function(){
$(".mask").css("display","block");
$(".tanchuang").css("display","block");
nums = $("#mun").html();
nums++;
spans.html(nums);
});
$(".mask").click(function(){
$(".tanchuang").css("display","none");
$(".mask").css("display","none");
});
</script>
标签：jQuery,40px,none,height,background,购物车,margin,display,弹窗 From： https://blog.51cto.com/u_12422954/5986026