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

- 日理万妓 2022-08-28 06:47 294阅读 0赞

### 使用jquery实现app中打开html 弹出一个遮罩提示用户在新的浏览器窗口打开代码详解 ###

*   *  效果图
     *  html代码
     *  js代码
     *  open\_browser.png遮罩图

## 效果图 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6K5b-G57696I-y_size_20_color_FFFFFF_t_70_g_se_x_16]

## html代码 ##

<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>
        
        
    <div class="weixin-tip">
        <p>
            <img src="image/open_browser.png" alt="浏览器中打开"/>
        </p>
    </div>

## js代码 ##

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

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

## open\_browser.png遮罩图 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6K5b-G57696I-y_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6K5b-G57696I-y_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/1934126576fa4ec3a6422a51e544acd6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6K5b-G57696I-y_size_19_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/f02dc46827cd47ab88f901b75434ab5d.png