(css)原生实现蒙版和关闭按钮

(css)原生实现蒙版和关闭按钮

加蒙版前

• 截取部分
  

加蒙版后

---

<template>
	<div class="bigDiv">
		<div class="leftOneTitle" @click="dian">按钮</div>
		<!-- 蒙版效果测试 -->
	    <div class="inside">
	      <div class="cancel" @click="cancel"></div>
	      <div class="insideMain">
	        <span>我是一个蒙版呀~</span>
	      </div>
	    </div>
	</div>
</template>

<script setup>
	...
	//蒙版测试
	const dian = () => {
	  let str = document.getElementsByClassName("inside")[0];
	  str.style.display = "block";
	};
	const cancel = () => {
	  let str = document.getElementsByClassName("inside")[0];
	  str.style.display = "none";
	};
	...
</script>

<style scoped>
/* 主体 */
.bigDiv {
  position: relative;
  ...
}
/* css蒙版 */
.inside {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.cancel {
  position: absolute;
  top: 0px;
  right: 20px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border: 4px solid #2b97e1;
}
.cancel::before,
.cancel::after {
  position: absolute;
  content: "";
  top: 46%;
  left: 11%;
  width: 80%;
  height: 4px;
  background-color: #2b97e1;
}
.cancel::before {
  transform: rotate(45deg);
}
.cancel::after {
  transform: rotate(-45deg);
}
/* 蒙版内容 */
.insideMain {
  width: 99%;
  height: 95%;
  /* border: 1px solid #ccc; */
  margin: 40px 10px 10px;
}
</style>

解决参考：

https://blog.csdn.net/weixin_52831324/article/details/127143560

https://jingyan.baidu.com/article/48b37f8d354b901a646488b2.html