web页在微信中访问增加遮罩层右上角弹出在浏览器中打开

最新推荐文章于 2024-07-08 09:31:33 发布

春风姐姐

最新推荐文章于 2024-07-08 09:31:33 发布

阅读量901

点赞数

原文链接：https://blog.csdn.net/zgsdzczh/article/details/79744838

版权

这段代码实现了一个功能，在微信中访问网页时，会显示一个全屏的遮罩层，并在右上角提供一个提示，引导用户在浏览器中打开网页。当检测到用户使用的是微信时，遮罩层会显示，提示图片为'tip.png'，通过JavaScript的$(window).on('load'...)事件监听页面加载完成，然后设置遮罩层的高度并显示。

摘要由CSDN通过智能技术生成

web页在微信中访问增加遮罩层右上角弹出在浏览器中打开

在这里插入图片描述

web页在微信中访问增加遮罩层右上角弹出在浏览器中打开

<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="images/tip.png" alt="在浏览器打开" />
	</p>
</div>

<script>
$(window).on("load", function() {
	var winHeight = $(window).height();
	function is_weixin() {
		var ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			return true;
		} else {
			return false;
		}
	}
	var isWeixin = is_weixin();
	if (isWeixin) {
		$(".weixin-tip").css("height", winHeight);
		$(".weixin-tip").show();
	}
})
</script>