功能介紹：
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>複製程式碼