使用场景:简易商城,点击立即购买,上滑选择规格等 相关详细信息
1、定义CSS(半透明背景层#mask,上滑功能主体:#mod_area)
#mask{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9998;top:0;transition:0.5s;display:none;}
#mod_area{position:fixed;height:695px;width:100%;left:0;bottom:-810px;z-index:9999;transition:0.5s;background:white;border-top:1px solid #efefef;}
.area_show{bottom:0px !important;}
注:这里transition:0.5s 是主要部分,代表动画时长
2、定义JS方法(通过JS操作添加CSS的方法实现上滑效果)
<script>
function hide_sel(){
$('#mod_area').removeClass('area_show')
$("#mask").fadeOut();
}
function show_sel(){
$('#mod_area').addClass('area_show')
$("#mask").fadeIn();
}
</script>
3、只需要在HTML中调用show_sel()即可, 然后 $("#mask").click(function(){ hide_sel()} ) //用于关闭功能主体