526互联

[CSS]浅记录两种弹窗属性

发布时间 2023-03-28 11:25:57作者: 夕苜19

自用笔记。考虑到不同页面的需求不同，弹窗的属性可能不同。

常规弹窗，采用fixed居中样式：

.pup_f
    position fixed
    top 0px
    width 1080px // 页面宽度
    height 1920px // 页面高度
    background-color rgba(0, 0, 0, 0.5)
    z-index 50
    .pup_tips
        position absolute
        left 50%
        top 50%
        transform: translate(-50%, -50%);
        width 900px
        height 500px
        background: url($path'pop/tips.png') no-repeat

 

 

有时候弹窗特别长，或者需要与页面内容进行呼应，采用absolute：

.pup_ab
    position absolute
    top 0
    width 100% //继承父元素，一般是.container
    height 100%
    background-color rgba(0, 0, 0, 0.5)
    z-index 50