type
status
date
slug
summary
tags
category
icon
password
用egg.js+ejs和jquery来写网站，所以需要自己封装一些组件
📝 主旨内容
🤗 总结归纳
CSS部分
这部分定义了遮罩层的样式:
- 这部分定义了遮罩层的样式:
- 使用fixed定位,覆盖整个视口
- 默认隐藏(visibility:hidden;opacity:0)
- 添加过渡效果
- 定义了不同z-index值的类
- 响应式设计,在小屏幕上调整z-index
js部分
这是一个构造函数,用于创建Overlay对象。主要功能包括:
- 初始化选项:设置z-index、DOM元素、点击事件等
- open方法:打开遮罩层
- 重置z-index
- 添加显示类
- 绑定点击事件
- 禁止页面滚动
- close方法:关闭遮罩层
- 重置z-index
- 移除显示类
- 恢复页面滚动
- resetZIndex函数:重置遮罩层的z-index值
- mo函数:阻止默认触摸事件,用于禁止页面滚动
总体来说,这段代码实现了一个可定制的遮罩层组件,可以通过JavaScript控制其显示、隐藏,并且能够设置不同的z-index值。它还包含了一些移动端的优化,如禁止页面滚动和响应式设计。这种遮罩层通常用于模态框、加载指示器或其他需要阻止用户与背景内容交互的场景。