微信提示使用浏览器遮罩层

最新推荐文章于 2023-01-02 14:48:44 发布

哥特曦

最新推荐文章于 2023-01-02 14:48:44 发布

阅读量628

点赞数 1

本文链接：https://blog.csdn.net/weixin_44511059/article/details/99842679

版权

不多说了，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>000</title>
</head>
<style>
    .wxtip{
        background: rgba(0,0,0,0.8);
        text-align: center;
        position: fixed;
        left:0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 998;
        display: none;
    }

</style>
<body>
<div>
    <p style="text-align:center"><img src="./kehuduan01.png" width="90%" height="90%">
    </p>
</div>
<!--Android下载-->
<div style="margin:0 auto;padding-top:12px;">
    <p style="text-align:center">
        <a id="android" name="android" href="https:" style="display: -webkit-inline-flex">
            <img  src="kehuduan02an-phone.jpg">
        </a>
    </p>
</div>
<!--提示使用其他浏览器-->
<div class="wxtip" id="JweixinTip">
    <img width="90%" src="live_weixin1.png" style="margin-left: 90px">
</div>

</body>
<script type="text/javascript">
// 进入判断是否在微信中
    window.onload = function() {
        isWeixinBrowser();
    }
    var btn = document.getElementById('android'); //下载
    btn.onclick = function () {
        isWeixinBrowser()
    }


    function isWeixinBrowser() {
        var ua = navigator.userAgent.toLowerCase();
        var result = (/micromessenger/.test(ua)) ? true : false;
        if (result) {
            // console.log('你正在访问微信浏览器');
            window.event ? window.event.returnValue = false : e.preventDefault();
            document.getElementById('JweixinTip').style.display = 'block';
            document.getElementById('JweixinTip').onclick = function () {
                this.style.display = 'none';
            }
        }else{
            //console.log('你访问的不是微信浏览器');
        }
        return result;
    }

</script>
</html>

哥特曦

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信提示使用浏览器遮罩层

不多说了，直接上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>000</title></head><style> .wxtip{ background: ...
复制链接

扫一扫