实现遮罩层
如何实现一个遮罩层的效果。
我们可以用遮罩层和用户进行一些互动之类的功能。
![如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/30afec966f5b4f519d8b189be896fb3e.png "如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]插图")
![如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/44f919c2d720406094683b18e43d0ce7.png "如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]插图2")
先是一个按钮。
然后下面就是一个大div设置大div覆盖全屏再设置透明度，然后我里面一个p标签，设置大小、位置、背景、类容等。
给大div设置隐藏
这边用js获取到按钮还有span标签的那个×用来关闭遮罩层还有大div就是整个遮罩层。
给按钮标签和span标签设置点击事件进行遮罩层的打开和关闭。
![如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/b4ca8853f8f244c9822c851f940920be.png "如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]插图4")
![如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/411a5983291a4a3482374a7a538b2c83.png "如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]插图6")
![如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]](https://img.bianchenghao.cn/app/bianchenghao_cn/6f8229ef7ecc49d48abed5b623776413.png "如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]插图8")
这样一个遮罩层就完成了呢
今天的文章如何实现遮罩层_遮罩层的步骤有哪些[通俗易懂]分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/72420.html
