前端 原生手写遮罩层和底部弹框

像一些原生写法，没借助ui组件的，想实现点击底部弹框的功能有点麻烦，刚好项目里是原生的写法，没借助任何ui组件，项目有个新需求，需要底部弹框+遮罩层，我这里用的是jq

第一步：html

ps:为啥要两个div元素，作用是用户点击遮罩层也能关闭底部弹框，点击内容块右上角icon也能关闭弹框，所以我这里用了两个div元素包裹着

第二步:css
1.遮罩层样式
ps:下图是遮罩层样式，宽高100%用来铺手机屏幕宽高，定位的作用是层级，层级要大于内容元素，但是要小于弹框的层级，所以这里加了定位，display:none作用当然默认是隐藏，用户点击才显示弹框

2.内容样式
ps:下图是弹框父级元素的样式，里面内容样式小伙伴按照自己项目布局自行添加就好，

3.点击事件
ps:用来显示弹框的事件

3.1,对应事件的js
ps:showPop()是点击显示事件，让遮罩层和底部弹框显示，底部弹框显示这里加了个css3的transition动画效果，用户体验更好，视觉更好，有个缓慢从下往上的效果
hidePop()是点击遮罩层让遮罩层隐藏的事件，跟显示的逻辑相反，

最后上效果图