jquery移动端底部分享弹窗（微信+朋友圈+扫码的分享弹窗）

封装个jquery的底部分享（底部弹窗）插件。

最终效果：

点击某个按钮从底部向上弹出弹窗，点击取消弹窗向下隐去

因为是混合开发，需要和移动端交互。
讲道理之前是移动端自己搞的，h5调起客户端就好了。
新工作要自己写一个，但是我写完了，又告诉我移动端自己搞了emmm（扫码还是传回来用h5生成）

静态资源

没有服务器，没有CDN，图标就自力更生吧（诶如果我能租个服务器emmm）



还是贴下吧，万一以后又要手写emmm

code部分

思路：emmm弹窗好像还是蛮简单的…

1. 先写个遮罩，我这里是#000，透明度20%。位置设为固定：fixed。
   （注意，不能写opacity，会继承）
2. 底部弹窗主体，设置为绝对位置，并且bottom:0;
3. 图标是直接flex布局，两端对齐。
4. 其他元素line , button等
5. 利用animate()方法根据主体的bottom写弹窗动效，同时伴随mask的开关

大致就这几个元素…

HTML

<div class="mask">
     <div class="content">
         <div class="title">请选择分享方式</div>
            <div class="share-box">
                <div onclick="goWxFriends()"><img src="/images/invite/down-wx.png" class="share"><div class="share-text">微信</div></div>
                <div><img src="/images/invite/down-friend.png" class="share"><div class="share-text">朋友圈</div></div>
                <div onclick="location.href='invite/scan'"><img src="/images/invite/down-scan.png" class="share"><div class="share-text">面对面扫码</div></div>
            </div>
            <div class="line"></div>
         <div class="fail-btn" onclick="closeShareModal()">取消</div>
     </div>       
</div>

CSS

/* 分享弹窗 */
.mask{
    width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.2);
	position: fixed;
	top: 0;
	left: 0;
	display: none;
}
.mask .content{
    position: absolute;
    bottom: 0;
    width:100%;
    background:rgba(255,255,255,1);
    border-radius:0.4rem 0.4rem 0 0;
}
.mask .content .title{
    font-size:0.44rem;
    text-align: center;
    margin-top: 0.6rem;
}
.mask .share-box{
    display: flex;
    justify-content: space-between;
    margin-top: 0.8rem;
    margin-bottom: 0.6rem;
    text-align: center;
}
.mask .share-text{   
    margin-top: 0.14rem;
    font-size: 0.38rem;
}
.share{
    width: 35%;
    margin: auto;
}
.line{
    width: 90%;
    height:0.02rem;
    background:rgba(234,234,234,1);
    margin: auto;
}
.fail-btn{
    font-size:0.42rem;
    font-weight:400;
    color:rgba(254,95,4,1);
    text-align: center;
    padding: 0.4rem 0;
}

JS

//唤起弹窗
function openShareModal(){
    $(".mask .content").css("bottom","-6rem");
    $(".mask").show();
    $(".mask .content").animate({bottom:"0"});
}
//关闭弹窗
function closeShareModal(){
    $(".mask .content").animate({bottom:"-6rem"});
     $('.mask').delay(400).hide(1);   
}