分享app下载链接带蒙版

自己换logo和安卓ios的下载链接即可
<!DOCTYPE html>
<html>
<head>
	<title>推广链接</title>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</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;
	}

	.wxtip-icon {
		width: 52px;
		height: 67px;
		background: url(weixin-tip.png) no-repeat;
		display: block;
		position: absolute;
		right: 20px;
		top: 20px;
	}

	.wxtip-txt {
		color: #fff;
		font-size: 16px;
		line-height: 1.5;
	}
	*{padding:0;margin: 0;}
	body {
		max-width: 750px;
		overflow: hidden;
		margin: 0 auto;
		text-align: center;
		background: #fff;
	}
	.down{
		width:100%;
	}
	.downimg{width:100%;}
	.iosDown,.androidDown{
		width:56%;
		margin:0 auto;
		border:2px solid #C4132F;
		border-radius: 10px;
	}
	.iosDown a,.androidDown a{
		text-decoration: none;
		color: #000;
		display: flex;
		font-size:16px;
		justify-content: center;
		align-items: center;
		padding:8px;
	}
	.iosDown{
		margin:20px auto;
	}
	.androidDown{
		background: #C4132F;
	}
	.androidDown a{
		color:#fff;
	}
	.downUrl img{
		margin-right: 15px;
		width: 24px;
	}
	p{
		font-weight: 600;
	}
	.iosDown p{
		color: #C4132F;
	}
</style>
<body>
<img class='downimg' src="/static/down/down.png">
<div class='downUrl'>
	<div class='iosDown'>
		<a class="downIos" href="#" id="ios_click">
			<img src="/static/down/ios_icon.png" />
			<p>iPhone版下载</p>
		</a>
	</div>
	<div class='androidDown'>
		<a href="#" id="JdownApp">
			<img src="/static/down/android_icon.png" />
			<p>Android版下载</p>
		</a>
	</div>
</div>

<div class="wxtip" id="JweixinTip">
	<p class="wxtip-txt"><img src="/static/down/img/weixin-tip.png" style="width: 100%"></p>
</div>

<script type="text/javascript" src="/static/down/js/jquery-2.1.1.min.js"></script>
<script>

	var u = navigator.userAgent,
			app = navigator.appVersion;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
	var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
	var isWeixin = !!/MicroMessenger/i.test(u);
	var isAlipay = /AlipayClient/.test(window.navigator.userAgent);

	$('#JdownApp').on('click',function(){

		// var isDingd=dd.env.platform=="notInDingTalk";
		if(isWeixin || isAlipay || (u.match(/WeiBo/i) == "weibo")) {
			document.getElementById('JweixinTip').style.display = 'block';
		}else{
			window.location.href = ''; // 跳安卓端下载地址
		}
	})

	$('#ios_click').on('click',function(){

		if(isWeixin || isAlipay || (u.match(/WeiBo/i) == "weibo")) {
			document.getElementById('JweixinTip').style.display = 'block';
		}else{
			window.location.href = ''; //苹果跳转地址
		}

	})
</script>
</body>
</html>
分享app下载链接带蒙版

猜你喜欢
