css 元素全屏显示（模态框）

原创已于 2022-05-09 12:59:43 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css定位 #模态框 #全屏显示

于 2022-05-09 09:23:57 首次发布

本文介绍如何利用CSS的position属性实现全屏模态框效果，重点在于消除transform样式对元素布局的影响，通过设置translate3d(0,0,0)并结合fixed定位，确保元素铺满整个屏幕。

场景：需要页面中的元素铺满整个屏幕实现模态框的功能

方案：使用position定位，但是要注意消除掉该元素其它样式设置的元素变换属性带来的影响。

.my-class{
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    -ms-transform: translate3d(0, 0, 0) !important;

    position: fixed !important;
    top:0 !important;
    bottom: 0 !important;
    left: 0  !important;
    right: 0  !important;
}