<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>購物車彈出層</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.xzgg_box {
background: #fff;
position: fixed;
z-index: 10;
left: 0;
bottom: 0;
width: 100%;
height: 5rem;
display: none;
z-index: 1000;
transform: translateY(100%);
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
-moz-transform: translateY(100%);
-o-transform: translateY(100%);
transition: transform 350ms;
-webkit-transition: transform 350ms;
-ms-transition: transform 350ms;
-moz-transition: transform 350ms;
-o-transition: transform 350ms;
box-shadow: 0 0rem 0.2rem #999;
}
.xzgg_box_on {
transform: translateY(0%);
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
transition: transform 350ms;
-webkit-transition: transform 350ms;
-ms-transition: transform 350ms;
-moz-transition: transform 350ms;
-o-transition: transform 350ms;
}
.xzgg_hide {
position: absolute;
top: 0.4rem;
right: 0.2rem;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
border: solid 1px #ddd;
text-align: center;
z-index: 10;
}
.xzgg_hide i {
text-align: center;
line-height: 0.6rem;
font-size: 0.4rem;
color: #999;
}
.xzgg_cpxx {
padding: 0.2rem 3%;
display: flex;
}
.m_bbs {
position: relative;
}
.xzgg_cpxx_img {
width: 1rem;
flex: 0 0 1rem;
overflow: hidden;
height: 1rem;
}
.fl {
float: left;
}
.xzgg_cpxx_img img {
display: block;
width: 100%;
}
.xzgg_cpxx_tetx {
padding-left: 0.3rem;
flex: 0 0 5rem;
overflow: hidden;
}
.xzgg_cpxx_tetx h5 {
color: #333;
margin-bottom: 0.2rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.xzgg_cpxx_tetx span {
color: #ff2121;
font-size: 0.3rem;
}
.gglb {
padding: 0.2rem 3%;
}
.gglb dl dt {
margin-bottom: 0.2rem;
}
.gglb dl dd {
overflow: hidden;
}
.item_type_a {
display: block;
float: left;
background: #f5f5f5;
color: #999;
padding: 0.2rem 0.5rem;
text-align: center;
border-radius: 0.1rem;
margin-bottom: 0.1rem;
margin-right: 0.1rem;
}
.ggnr {
padding: 0.2rem 3%;
overflow: hidden;
}
.ggnr span {
float: left;
line-height: 0.9rem;
}
.ggnr .gmsl {
float: right;
margin-top: 0.1rem;
}
.gg_btn {
overflow: hidden;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
z-index: 11;
}
.gg_btn button{
background: #ff8855;
}
.gg_btn button {
float: left;
width: 50%;
height:2rem;
border: none;
border-radius: 0;
color: #fff;
}
.minus,.nums,.add{
float: left;
}
.nums{
width: 30px;
text-align: center;
}
.backdrop {
display: none;
position: fixed;
z-index: 9;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.3);
}
</style>
</head>
<body>
<input type="button" id="btn" value="購買" />
<div class="xzgg_box">
<div class="xzgg_hide"><i class="">x</i></div>
<div class="xzgg_cpxx m_bbs">
<div class="xzgg_cpxx_img fl"><img class="cart_select_img" src=""></div>
<div class="xzgg_cpxx_tetx fl">
<h5 class="cart_select_title">安兒樂超值乾爽M、L、XL</h5>
<span class="st_price cart_select_d1_price">¥25.00</span>
</div>
</div>
<div class="gglb m_bbs cart_select_types_wrap">
<dl>
<dt>規格：</dt>
<dd class="cart_select_types">
<a href="javascript:void(0)" class="item_type_a gglb_on">安兒樂超值乾爽M</a></dd>
</dl>
</div>
<div class="ggnr m_bbs">
<span>購買數量</span>
<div class="gmsl cart_select_inventory" data-numbox-min="1" data-numbox-max="0">
<button class="minus" name="minus">-</button>
<input type="text" name="nums" class="nums" value="0">
<button class="add" name="add">+</button>
</div>
</div>
<div class="gg_btn">
<button class="gwc_ts" type="button" style="width: 100%;">加入購物車</button>
</div>
</div>
<div class="backdrop"></div>
<script type="text/javascript">
$("#btn").on("click",function(){
$('.backdrop').show();
$(".xzgg_box").fadeIn(350).addClass("xzgg_box_on");
})
$(".xzgg_hide").on("click",function () {
$('.backdrop').hide();
$(".xzgg_box").fadeOut(350).removeClass("xzgg_box_on");
document.body.ontouchmove = function (e) {
e.stopPropagation();
};
});
</script>
</body>
</html>
