css实现弹框带有遮罩

纯纯css实现，不借用任何插件组件实现弹框

一、自定义标签，我这是小程序所以是<view/>

 说明：

　　1.v-if是控制在什么时候展示

　　 2.window弹框的样式

　　 3.area-column就相当于display:flex；flex-direction: column；

二、css样式(可以修改样式实现从底部划出，从上划出等)

 

三、遮罩样式如下：

 

 说明：

　　1.v-if判断啥时候出现，跟弹框判断基本一致

　　2.hidden也是判断是否展示

css样式：

写到这儿弹框基本就出来了

附加：有时需要是弹框上面还要有关闭按钮，如下图：

 

 那么代码来了

 

 说明：

　　1.icon-gunabi是在阿里巴巴矢量库上扒下来的

　　 2.click就是点击关闭按钮时，让弹框关闭

　　 3.v-if就是判断啥时候展示，和弹框基本一致

二、css样式来了