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

实现功能：

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'); }

效果图显示

非微信用户

微信用户