使用jquery实现在app中打开h5网址添加在浏览器中打开提示遮罩代码详解

效果图

html代码

<!--提示弹窗 start-->
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        .weixin-tip {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            filter: alpha(opacity=80);
            height: 100%;
            width: 100%;
            z-index: 100;
        }

        .weixin-tip p {
            text-align: center;
            margin-top: 10%;
            padding: 0 5%;
        }
    </style>
    <!--提示弹窗 stop-->
    
<div class="weixin-tip">
    <p>
        <img src="image/open_browser.png" alt="浏览器中打开"/>
    </p>
</div>

js代码

自己引入jquery-1.11.3.min.js代码

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>

<!--弹窗层 start-->
<script type="text/javascript">
    $(window).on("load", function () {
        var winHeight = $(window).height();

        function is_aliapp() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/aliapp/i) == "aliapp") {
                return true;
            } else {
                return false;
            }
        }
        var isAliapp = is_aliapp();
        if (isAliapp) {
            $(".weixin-tip").css("height", winHeight);
            $(".weixin-tip").show();
        }
    })
</script>
<!--弹窗层 stop-->

aliapp 是判断是否在阿里系的app中打开，可以根据自己的需求修改需要匹配的值

open_browser.png遮罩图