用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

从CSS角度来做一个模态框

Rolan 2019-12-30 00:42

今天我们从CSS角度来做一个下图这种模态框。先上代码:https://developers.weixin.qq....模态框背后的背景是一个fixed定位,四个方向都为0的view,主要是怎么实现中间弹窗的垂直水平居中,这里提供两个方案。1、定位 ...

今天我们从CSS角度来做一个下图这种模态框。

先上代码: https://developers.weixin.qq....

模态框背后的背景是一个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" 就可以阻止背后页面的上下滚动。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 祺爸 来自: segmentfault