用原生js写 遮罩层

695 阅读1分钟
  • 用原生js写
  • 点旁边遮罩层关闭弹窗,点内容不关闭
  • 遮罩层要占满屏幕

实现了一个简单的弹窗,其中:

  1. 使用了两个 div 元素来实现遮罩层和弹窗内容,遮罩层默认隐藏,弹窗内容也默认隐藏。
  2. CSS 部分设置了遮罩层和弹窗的样式,使其可以占满屏幕和垂直居中。
  3. JavaScript 部分通过监听遮罩层和关闭按钮的点击事件来关闭弹窗,同时阻止了弹窗内容的点击事件冒泡,避免误关闭弹窗。
  4. 最后通过调用 openDialog() 函数来显示弹窗。