如何简单的使vant popup弹窗的遮盖层变为透明
前言
最近在学习H5的相关知识,由于从未接触H5,故借此博客记录一些我遇到的问题
如何在使用vant的popup组件时以简单的方式实现遮罩层的透明化?
其实在看了官方文档给的API后可以明显的找到如下几个prop与遮罩层有明显的关联
这个时候我首先想法就是将是否显示遮罩层overlay属性设为false,这样是否就能使遮罩层消失?不过如果这么容易就解决了我也不至于将其搬到此处来说了,显然这样做并没有使遮罩层产生任何变化,之后再网上多番寻找也没有找到一个合适的方法,基本没有直接提到相关问题的文章,而再进一步思考,我觉得还是得从官方给的API下手,而回头再看几个不同的属性,当然选择使用over-class指定给遮罩层的样式文件,既然不能直接让它不显示,那就间接达成目标嘛,使之背景色为透明不久自然而然的让它消失了吗?到这步实际上这个问题也就解决了。当然透明化需要使用opacity参数,设置为0即不透明度为0.这个参数使用起来相较于其他方式还是方便许多的。
最后附上使之透明的css代码:
.overlaystyle{
background:red;
opacity: 0.0;
}