分享微信端判断，覆盖提示框显示

实现功能：

1、点击分享图标，显示覆盖层，分享提示图片，再次点击任意处覆盖层隐藏

2、判断是否处于微信客户端，只有使用微信，才能进行分享功能​

controller层

/**
 * 
 * Enter description here ...视频详细页
 */
public function getVideoInfo($id)  {       

    $oVideo = Video::find($id);
    $oAuthor=$oVideo->Author();              
    $oExport=$oVideo->Expert();          
    $oComments=$oVideo->comments()->get();
    $agent = strtolower ( $_SERVER ['HTTP_USER_AGENT'] );//获取当前用户代理信息
    $is_weixin= (strpos ( $agent, 'micromessenger' )) ? true : false;//判断是否是微信用户
    return View::make('front.info')->with('oVideo',$oVideo)
                                   ->with('oAuthor',$oAuthor)
                                   ->with('oExport',$oExport)
                                   ->with('oComments',$oComments)
                                   ->with('is_weixin', $is_weixin);
}

界面代码显示

<span class="share">
    <a href="javascript:void(0);" onclick="shareShow({{$is_weixin}})">分享</a>
</span>
<div class="cover_box" id="cover_box" style="display: none" onclick="shareHide()"></div>
<div class="share_box" id="share_box" style="display:none;" onclick="shareHide()">
        <img src="{{asset('assets/images/share_info.png')}}"/>
        <a href="javascript:void(0);"><img src="{{asset('assets/images/know.png')}}" /></a>
</div>

css样式

.cover_box{ width:100%; height:100%; background:rgba(0,0,0,0.5); position:fixed; top:0; left:0;}
.share_box{ position:absolute; width:100%; top:0; left:0; text-align:center;}
.share_box a{ display:inline-block; width:42%; margin-top:32%;}

js片段

/**
 * 分享处理
 * 
 * @returns
 */
function shareShow(is_weixin){
    if(is_weixin){
        $("#cover_box").css("display",'block');
        $("#share_box").css("display",'block');
    }else{

    }
}
function shareHide(){
    $("#cover_box").css("display",'none');
    $("#share_box").css("display",'none');
}

效果图显示

1. 非微信用户

1. 微信用户