微信提示“在浏览器打开”效果实现

概述

大体思路是这样的:先建一个蒙版,蒙版放上提示的信息,然后写一个js,在页面打开的时候判断是不是用微信自带的浏览器打开的,如果是就打开蒙版,提示用浏览器打开

1.基本页面


<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>APP下载</title>
        <style type="text/css">
            td {
                line-height: 50px;
                font-size: 40px;
            }       
        </style>
    </head>

    <body style="background-color: #4DFFFF;padding-top: 400px">
        <div align="center" style="width: 100%;">
            <table>
                <tr>
                    <td valign="middle">
                        <a href="community.apk" id="JdownApp">安卓下载</a>
                    </td>
                </tr>
                <tr>
                    <td valign="middle">
                        <a href="community.ipa" id="JdownApp2" class="btn-warn">苹果下载</a>
                    </td>
                </tr>
            </table>

        </div>
    </body>
</html>

添加蒙版

<!--引入遮蔽层-->
<div id="Mask" style="">

</div>
//蒙版样式
#Mask {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-image: url(img/tweixinip.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.model-content {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ffffff;
    border-radius: 6px;
    margin: 100px auto;
    line-height: 30px;
    z-index: 10001;
}

添加js

<script type="text/javascript">
    //判断是否在微信中打开
    var ua = navigator.userAgent;
    var isWeixin =  !!/MicroMessenger/i.test(ua);

    //如果使用的是微信自带浏览器,就打开蒙版
    if(isWeixin) {
        var SHOW = 0;
        document.getElementById('Mask').style.display = ++SHOW % 2 == 1 ? 'block' : 'none';
    }

</script>

最终效果

当使用浏览器打开时展示原始页面

![]()

当使用微信打开时展示蒙版

![]()

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。