评论

从CSS角度来做一个模态框

最近社区有文章提到了制作模态框,今天我们从CSS角度来做一个下图这种模态框。

最近社区有文章提到了制作模态框,今天我们从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-contentalign-items都是center就可以了。

display: flex;
justify-content: center;
align-items: center;

彩蛋

模态框弹出后,在父级上加上catchtouchmove="ture"就可以阻止背后页面的上下滚动。

最后一次编辑于  2019-12-27  
点赞 8
收藏
评论

4 个评论

  • 子不语
    子不语
    2019-12-27
    我也太难了吧
    2019-12-27
    赞同 2
    回复 2
    • 祺爸💎
      祺爸💎
      2019-12-27
      给你点赞了
      2019-12-27
      1
      回复
    • 子不语
      子不语
      2019-12-27回复祺爸💎
      哈哈哈
      2019-12-27
      回复
  • Warwick🇨🇳 🇨🇳
    Warwick🇨🇳 🇨🇳
    2019-12-28

    ture === true ?

    2019-12-28
    赞同
    回复 1
    • 祺爸💎
      祺爸💎
      2019-12-28
      刚试了,居然可以是任意字符串😅
      2019-12-28
      回复
  • 恭喜發財 િ🌝ી
    恭喜發財 િ🌝ી
    2019-12-27

    『模态框弹出后,在父级上加上catchtouchmove="ture"就可以阻止背后页面的上下滚动。』

    实测加在遮罩层上可以实现(遮罩层一定要是模态框的父元素)

    <view class="mask" catchtouchmove="ture">
      <view class="popup">模态框</view>
    </mask>
    
    2019-12-27
    赞同
    回复 4
    • 祺爸💎
      祺爸💎
      2019-12-27
      父级就是指的遮罩层
      2019-12-27
      回复
    • 恭喜發財 િ🌝ી
      恭喜發財 િ🌝ી
      2019-12-27回复祺爸💎
      我之前遮罩是放在同级的(因为遮罩有可能该页面别的地方也会用到)。所以一直无效
      2019-12-27
      回复
    • 祺爸💎
      祺爸💎
      2019-12-27回复恭喜發財 િ🌝ી
      你这种情况就要在每一个独立的父级上加
      2019-12-27
      1
      回复
    • 恭喜發財 િ🌝ી
      恭喜發財 િ🌝ી
      2019-12-27回复祺爸💎
      学到了。多谢大佬指点
      2019-12-27
      回复
  • 黎😄
    黎😄
    2019-12-27
    好棒啊,想做个功能好久了,一直不会做。谢谢大大,学习了学习了
    2019-12-27
    赞同
    回复 4
    • 子不语
      子不语
      2019-12-27
      所以为什么不看我的!!!
      2019-12-27
      回复
    • Hanks🇨🇳
      Hanks🇨🇳
      2019-12-30回复子不语
      他嫌弃你
      2019-12-30
      回复
    • Hanks🇨🇳
      Hanks🇨🇳
      2019-12-30回复Hanks🇨🇳
      发现一个bu g
      2019-12-30
      回复
    • 子不语
      子不语
      2019-12-30回复Hanks🇨🇳
      我太南了
      2019-12-30
      回复
登录 后发表内容