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

nyf_unknown

已于 2023-07-21 15:23:10 修改

阅读量1.6k

点赞数

分类专栏： CSS 文章标签： css html 前端

于 2023-07-21 14:08:03 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/131850224

版权

CSS 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

(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%;
}