[分享]css3弹窗后禁止滚动条

CSS3弹窗是网页设计中常用的一种弹窗形式，其可以通过CSS3中的transformation、transition以及animation等特性来实现，实现方式多样，但在其中一个问题上比较通用：弹窗出...

CSS3弹窗是网页设计中常用的一种弹窗形式，其可以通过CSS3中的transformation、transition以及animation等特性来实现，实现方式多样，但在其中一个问题上比较通用：弹窗出现后禁止滚动条滑动。

html,body{
    width: 100%;
    height: 100%;
    overflow: hidden; /*隐藏滚动条*/
}
.popup{
    width: 400px;
    height: 300px;
    background-color: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 999; /*弹窗层级最高*/
}
.popup-active{
    display: block;
    animation: popup-show .3s forwards; /*弹窗出现动画*/
}
.popup-close{
    display: none;
    animation: popup-hide .3s forwards; /*弹窗消失动画*/
}

/*弹窗出现动画*/
@keyframes popup-show{
    from{
        opacity: 0;
        transform: translate(-50%,-50%) scale(.8);
    }
    to{
        opacity: 1;
        transform: translate(-50%,-50%) scale(1);
    }
}

/*弹窗消失动画*/
@keyframes popup-hide{
    from{
        opacity: 1;
        transform: translate(-50%,-50%) scale(1);
    }
    to{
        opacity: 0;
        transform: translate(-50%,-50%) scale(.8);
    }
} 

以上代码中，我们使用了position:fixed将弹窗定位到页面的中央，使用了translate(-50%,-50%)将弹窗水平方向上和垂直方向上居中显示。使用了z-index属性将弹窗的层级设置在最高层，避免其他元素遮挡弹窗。然后我们为弹窗添加了出现和消失的动画，使弹窗更加符合用户体验。

在弹窗出现的时候，我们给html和body元素添加了overflow:hidden来隐藏滚动条，这样就可以达到弹窗出现的同时禁止滚动条的滑动效果。在弹窗消失后，我们可以通过JavaScript或者CSS样式控制滚动条的出现。