首页
前端开发
Javascript
实现模态框遮罩层效果

实现模态框遮罩层效果

40 次浏览 0 条评论
rar
rar

模态框 (Modal) 组件常用于显示重要信息，并阻止用户与页面其他部分交互。为了突出显示模态框内容，通常会在其背后添加一个半透明的遮罩层，使页面背景变暗。

实现遮罩层效果有多种方法，可以使用 CSS 创建一个覆盖整个视口的元素，并设置其背景颜色和透明度。

以下是一个简单的示例：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 1001;
}

在 JavaScript 中，可以根据需要动态添加或移除 modal-overlay 类来控制遮罩层的显示和隐藏。

rar 文件大小：57.38KB