Loading

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

概述

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

基本页面

<!DOCTYPE html>
<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>

最终效果

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

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

posted @ 2019-09-05 19:43  Createsequence  阅读(1511)  评论(0)  编辑  收藏  举报