微信提示使用浏览器遮罩层注意事项

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

喊我回去学习

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

阅读量601

点赞数

分类专栏： html 文章标签：微信 javascript 前端

本文链接：https://blog.youkuaiyun.com/sugar1236/article/details/128520883

版权

html 专栏收录该内容

4 篇文章

订阅专栏

文章讲述了在创建微信提示使用浏览器遮罩层时遇到的问题，即外部引用CSS可能导致样式在某些浏览器中不生效。为解决此问题，建议将HTML和CSS代码写在同一文件内，并提供了相应的CSS样式和JavaScript检测代码，确保在微信浏览器中正确显示遮罩层。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信提示使用浏览器遮罩层

注意问题
蒙版的css样式千万不要用外链的css，否则有的微信浏览器打开或者手机默认浏览器打开，弹窗层不起效果，里面的一些样式也不起作用。
一定要把蒙版的html和css都写在一个html上面

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.wxtip{
			background: rgba(0,0,0,0.8);
			position: fixed;
			left:0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 998;
			display: block;
		}
		.wxtip .img-box{
			width: 100%;
			height: 2.34rem;
			margin-top: 1rem;
		}
		.wxtip .fly{
			float: right;
			margin-right: 0.5rem;
			width: 2.83rem;
			height: 2.34rem;
		}
		.wxtip .right-arrow{
			font-size: 0.36rem;
			color: #FFFFFF;
			margin-left: 1rem;
		}
		.wxtip .chrome-box{
			width: 4rem;
			margin-left: 1rem;
			border-radius: 10px;
			border:1px solid #FFFFFF;
			font-size: 0.36rem;
			color: #FFFFFF;
			display:flex;
			margin-top:0.3rem;
			padding: 0.1rem;
			align-items: center;
		}
		.wxtip .chrome-box img{
			margin-right: 0.1rem;
			width: 0.34rem;
			height: 0.34rem;
		}
	</style>
</head>
<body>
	<div class="wxtip" id="JweixinTip">
		<div class="img-box">
			<img src="./static/fly.png" class="fly" alt="">
		</div>
		<p class="right-arrow">点击右上角，选择</p>
		<div class="chrome-box">
			<img src="./static/chrome.png" alt="">
			<p>在浏览器中打开下载</p>
		</div>
	</div>
</body>
<script>
	window.onload = function() {
	    isWeixinBrowser()
	}
	function isWeixinBrowser(){
	 var ua = navigator.userAgent.toLowerCase();
	     var result = (/micromessenger/.test(ua)) ? true : false;
	     if (result) {
	         // console.log('你正在访问微信浏览器');
	         window.event ? window.event.returnValue = false : e.preventDefault();
	         document.getElementById('JweixinTip').style.display = 'block';
	         // document.getElementById('JweixinTip').onclick = function () {
	         //     this.style.display = 'none';
	         // }
	     }else{
	         //console.log('你访问的不是微信浏览器');
	     }
	     return result;
	}
</script>
</html>