微信引导分享页面 及 素材

html：

<div class="col-xs-2 clearfix">
    <img src="{$Think.config.tpl_src}/bootstrap/img/img-fx.png"
         class="img-responsive pull-right yxg-question-share" alt="Responsive image" id="share_btn">
</div>

其实html上可以随意写 只要指定一个 点击地方的id是share_btn

 

css：

#shareit {
    -webkit-user-select: none;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);text-align: center;top: 0;left: 0;z-index: 105;
}
#shareit img { max-width: 100%;}
.arrow {position: absolute; right: 10%;top: 5%;}

js：

$("#share_btn").on("click", function() {
    $("#shareit").show();
});
$("#shareit").on("click", function(){
    $("#shareit").hide();
})

素材（图片上传会有水印 所以压缩上传）：

http://ask.mykeji.net/content/uploadfile/201906/75ba1560132865.zip