实现功能:
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');
}
效果图显示
- 非微信用户
- 微信用户