最近社区有文章提到了制作模态框,今天我们从CSS角度来做一个下图这种模态框。
先上代码:https://developers.weixin.qq.com/s/fINXOVmC7wdn
模态框背后的背景是一个fixed定位,四个方向都为0的view,主要是怎么实现中间弹窗的垂直水平居中,这里提供两个方案。
1、定位
这种方案是将弹窗设置绝对定位后,左边(上边)距设为50%,就是弹窗左上角距父级左上角的距离正好是父级的宽度(高度)的50%,就是在正中间,同时使用transform
属性,将弹窗向左(上)移动自身宽度(高度)的50%,来实现弹窗正好在水平(垂直)方向都能居中。
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
2、flex布局
这种方案更简单,只需要将父级设置为flex布局的同时设置justify-content
和align-items
都是center
就可以了。
display: flex;
justify-content: center;
align-items: center;
彩蛋
模态框弹出后,在父级上加上catchtouchmove="ture"
就可以阻止背后页面的上下滚动。
请问有没有人帮忙写一个小程序的13655555830微信
ture === true ?
『模态框弹出后,在父级上加上catchtouchmove="ture"就可以阻止背后页面的上下滚动。』
实测加在遮罩层上可以实现(遮罩层一定要是模态框的父元素)
<view class="mask" catchtouchmove="ture"> <view class="popup">模态框</view> </mask>