您的位置:首页 > 移动开发 > 微信开发

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

2016-09-14 14:03 197 查看
实现功能:

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


效果图显示

非微信用户



微信用户

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  微信
相关文章推荐