HTML 弹出遮罩层一（遮罩层和内容标签嵌套）

时间：2021-11-25 07:46:35
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .modal_cover{

            display: none;

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0;

            left: 0;

            background-color: rgba(0, 0, 0, .6);

        }

        .modal{

            position: absolute;

            width: 823px;

            background: white;

            z-index: 99;

            height: 80px;

            /* 水平垂直居中 */

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

            /* 超出高度右侧出现垂直滚动条 */

            overflow:auto;

            overflow-x:hidden;

        }

        .button{

            margin: 40px;

        }

    </style>

</head>

<body>

    <div class="modal_cover" style="display:block">

        <div class="modal">

            <button class="button">提交申诉</button>

        </div>

    </div>

</body>

</html>

相关文章