分享微信端判断,覆盖提示框显示
2016-09-14 14:03
197 查看
实现功能:
1、点击分享图标,显示覆盖层,分享提示图片,再次点击任意处覆盖层隐藏
2、判断是否处于微信客户端,只有使用微信,才能进行分享功能
controller层
界面代码显示
css样式
js片段
效果图显示
非微信用户
微信用户
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'); }
效果图显示
非微信用户
微信用户
相关文章推荐
- 提示用户通过键盘输入一个用户名,来判断这个用户是否存在,如果存在就显示一下用户默认的shell
- 注册JQuery使用ajax调用后台方法,判断用户名、邮箱是否存在,并显示隐藏提示
- 微信浏览器打开 点击下载app 无需提示使用浏览器打开--代码分享
- App在iOS9上不能分享至微信,提示微信没有安装
- iOS9.0 微信、QQ分享提示未安装
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- 微信分享链接或网站文章到微信朋友圈,缩略图片不显示,该如何解决?
- 微信分享缩略图无法显示的解决办法
- 友盟社会化分享之判断是否安装了QQ、微信、新浪微博客户端
- App在iOS9上不能分享至微信,提示微信没有安装
- 注册JQuery使用ajax调用后台方法,判断用户名、邮箱是否存在,并显示隐藏提示
- Android 微信分享操作后 在当前界面提示方案 解决
- 微信里如何判断页面被分享成功
- 分享时判断设备是否安装微信
- 微信分享朋友链接显示js代码
- 分享一个jquery插件-主要用于显示微博人的图像和鼠标提示等poshytip
- wap页,微信打开,下载无效.判断微信打开,并提示用其他浏览器打开.
- 微信分享功能引入页面-控制分享时候调用的标题、图片、url和微信按钮隐藏显示控制
- 微信分享按钮隐藏、显示问题和注意事项
- 微信分享提示未安装