jquery判断微信客户端,下载页面微信内显示使用浏览器打开浮层遮罩

jquery判断微信客户端显示指引浮层原理

html中有浮层的结构和样式,默认隐藏,js判断如果是微信中打开,将本来隐藏的浮层改为显示状态,引导用户使用流器打开。

查看demo,请使用微信扫码

jquery判断微信客户端弹浮层

css样式

.weixin-tip{ position: fixed; display: none; left:0; top:0; bottom:0; background: rgba(0,0,0,0.9); filter:alpha(opacity=90);  height: 100%; width: 100%; z-index: 100; }
.weixin-tip p{ text-align: center; margin-top: 10%; padding:0 5%; }
.weixin-tip img{ width: 100%; height: auto; }

html结构

参考图片:https://huaban.com/pins/2226483540/

    <div class="weixin-tip">
        <p>
            <img src="static/tip-android-wx.png" alt="微信打开"/>
        </p>
    </div>
    <!-- /.weixin-tip -->

js 代码

<script src="https://cdnjs.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(window).on("load",function(){
        var winHeight = $(window).height();
        function is_weixin() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        }
        var isWeixin = is_weixin();
        if(isWeixin){
            $(".weixin-tip").css("height",winHeight);
            $(".weixin-tip").show();
        }
    })
</script>

代码出处(两个出处严重雷同,结构、图片,这里都是混合引用!)
58二维码应用分发
微信扫码提示在浏览器中打开的遮罩代码解决方式

旧文

2015-11-18 多说《最近访客》调用代码设置头像大小的方法 view 3,484
六月读文摘要 view 489

转载请注明转自:一极乐http://yijile.com/log/490.html


话题相关文章

话题标签

HTMLjQueryJavaScript微信乐知道

一极乐 为乐趣而生

《jquery判断微信客户端,下载页面微信内显示使用浏览器打开浮层遮罩》  发表时间:  最后更新时间:

谁来过

寒叶邀请你对本文不足说出你的看法!

添加新评论

captcha




博主推荐专题

佛学资料Typecho模版代码乐知道CSS百度CyanogenMod
搜索引擎提交入口言辞


关闭

标签云

一极乐 衷心接受你的建议

TOP