美文网首页
如何写一个遮挡层和对话框

如何写一个遮挡层和对话框

作者: 我_巨可爱 | 来源:发表于2017-11-24 15:27 被阅读0次
    1. 遮挡层,全屏
    2. 对话框上下左右居中

    html

    <div class="wrapper">
        <div class="bg"></div>
        <div class="contaier"></div>
    </div>
    

    css

    .wrapper, .bg {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow-y: auto
    }
    .bg {
        background: #364252;
        opacity: 0.7;
    }
    .contaier {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 600px;
        height: 500px;
        background-color: red;
    }
    

    相关文章

      网友评论

          本文标题:如何写一个遮挡层和对话框

          本文链接:https://www.haomeiwen.com/subject/wbhfbxtx.html