header头部样式文件导入
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>
HTML 内容部分
<!-- 加入购物车的功能 -->
<div id="popover" class="mui-popover">
<div class="xuanze">
<img src="images/123456.jpg" >
<div class="jiage" >
<p >这里是关于产品的一些相关介绍</p>
<span style="color:#F1B728 ; font-size:1rem;">售价：￥2000.00</span>
<span style="text-decoration: line-through; font-size: 0.625rem;" >￥3000.00</span>
</div>
</div>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="box-type leixing">
<div class="type">颜色</div>
<span>红色</span>
<span>蓝色</span>
<span>粉色</span>
<span>灰色</span>
<span>黑色</span>
<div class="type" >尺寸</div>
<div class="chicun" >
<span>X</span>
<span>XX</span>
<span>XL</span>
<span>M</span>
</div>
</div>
</li>
<li class="mui-table-view-cell">
<div class="box-num">
<div>数量：</div>
<div class="anniu" >
<div class="mui-numbox" data-numbox-step=‘1‘ data-numbox-min=‘1‘ data-numbox-max=‘10000‘>
<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
<input class="mui-numbox-input" type="number" />
<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS 部分样式
/* 加入购物车按钮的颜色 */
.mui-btn-primary{
background-color: #FFFFFF;
}
/* 组件自带的底部小箭头,删除 */
.mui-popover .mui-popover-arrow.mui-bottom{
display: none;
}
/* 弹出框的大小 */
#popover{
width: 100%;
top: 15.85rem!important;
left: 0!important;
position: fixed;
bottom: 0;
}
.mui-popover .mui-table-view{
/* max-height: 500px!important; */
overflow-y: auto;
}
/* 弹出框的位置 */
.cart .add{
float: left;
width:35%;
height: 100%;
font-size: 1rem;
text-align: center;
color: #FFFFFF;
border: 0;
background-color: #FFC21F;
}
.cart .buy{
float: left;
width:35%;
height: 100%;
font-size: 1rem;
color: #FFFFFF;
background-color: #FF384F;
text-align: center;
border: 0;
border-radius:0;
}
/* 选择商品相关信息 */
/* .add-car{
width: 100%;
height: 25rem;
overflow: auto;
position: fixed;
bottom: 0;
z-index: 55;
} */
.active{
width: 100%;
height: 25rem;
overflow: auto;
position: fixed;
bottom: 0;
z-index: 55;
display: block;
background-color: #FFFFFF;
padding: 1.25rem;
}
.container{
position: relative;
background-color: #FFFFFF;
padding-bottom: 2.1875rem;
display: none;
}
/* 头部价格区域 */
.box-ders{
/* display: flex;
justify-content: flex-start; */
/* position: relative; */
}
.xuanze{
/* position: fixed; */
width:100%;
height: 6.25rem;
border: 0.0625rem solid #eee;
border-radius: 0.625rem;
display: flex;
justify-content: flex-start;
/* z-index: 99999; */
}
.xuanze img{
position: relative;
top:-1.25rem;
left: 0.9375rem;
width:30%;
height: 100%;
border-radius: 0.625rem;
}
.xuanze .jiage{
width:12.5rem ;
margin-top: 0.3125rem;
margin-left:1.875rem;
}
/* .jiage{
position: absolute;
top:0.3125rem;
left: 6.25rem;
} */
.jiage p{
color: #000000;
}
/* 商品类型 */
.mui-table-view-cell{
padding: 0.3125rem 0.9375rem;
}
.box-type .type{
margin: 0.3125rem 0;
}
.mui-table-view-cell .box-type span{
display: inline-block;
width:7.5rem;
height: 1.5625rem;
text-align: center;
border-radius: 0.3125rem;
color: #000000;
border: 0.0625rem solid #ccc;
margin: 0.3125rem 0.625rem;
}
.type-css{
color: white;
background-color:red ;
}
/* 数量区域 */
.box-num{
padding:0.625rem 0 2.5rem;
}
.box-num p{
font-size: 1.25rem;
font-weight: 400;
}
.mui-numbox{
width: 6.25rem;
height: 1.5625rem;
padding: 0 1.875rem;
margin-top: 0.625rem;
border-radius: 0.9375rem;
}
jquery 内容
<script type="text/javascript">
// 点击收藏
var toggle = true;
$(".imgclick").click(function() {
if (toggle) {
$(".imgclick").attr("src", "images/1111.png") //空心的图片
toggle = false;
} else {
$(".imgclick").attr("src", "images/2222.png")//实心的图片
toggle = true;
}
});
// 加入购物车
$(‘#add-cart‘).on(‘tap‘,function(){
$(‘#jiu‘).css(‘opacity‘, ‘0.5‘)
$(‘.container‘).attr(‘class‘,‘active‘)
mui.toast(‘添加商品成功‘);
})
//点击每个商品类型修改样式
$(‘.box-type‘).on(‘tap‘,‘p‘,function(){
$(this).attr(‘class‘,‘type-css‘)
$(this).siblings(‘p‘).attr(‘class‘,‘‘)
})
//点击确认按钮，
$(‘#button‘).on(‘tap‘,function(){
$(‘#jiu‘).css(‘opacity‘, ‘1‘)
$(‘.active‘).attr(‘class‘,‘container‘)
mui.toast(‘添加商品成功‘);
})
//点击取消按钮
$(‘.mui-icon-close‘).on(‘tap‘,function(){
$(‘#jiu‘).css(‘opacity‘, ‘1‘)
$(‘.active‘).attr(‘class‘,‘container‘)
})
// 点击商品类型、
$(‘.leixing‘).on(‘tap‘,‘span‘,function(){
$(this).attr(‘class‘,‘type-css‘)
$(this).siblings(‘span‘).attr(‘class‘,‘‘)
if($(this).hasClass(‘type-css‘)){
$(this).css({‘color‘:‘white‘})
$(this).siblings(‘span‘).css({‘color‘:‘#000000‘})
}
})
</script>
补充说明：
很大一部分内容都是来自广大聪明的网友，我只是根据自己的实际需求进行相关的修改，希望对大家有所帮助，欢迎提出修改