(css)原生html实现遮罩层弹窗

(css)原生html实现遮罩层弹窗

---

效果：

---

html

<div class="overlay">
	<div class="content">
		 <!-- 需要遮罩的内容 --> 
		 <el-table :data="tableData" size="mini" class="table-class" border stripe>
		   <el-table-column type="index" label="序号" width="50" align="center" /></el-table-column>
		   ...
		 </el-table>
	</div>
</div>

css样式：

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置背景颜色为半透明黑色 */
  z-index: 9999; /* 设置 z-index 值确保遮罩层位于其他元素之上 */
  display: flex;
  justify-content: center;
}

.content {
  position: relative;
  z-index: 10000; /* 设置 z-index 值确保内容层位于遮罩层之上 */
  background-color: #01bdb2;
  width: 50%;
  height: 30%;
  margin-top: 10%;
}