模态框模型

技术难点:

1,如何保证遮罩层mask占满整个屏幕,并且锁定当前屏幕区

2,保证div元素垂直水平居中(我下篇文章有个小总结哦!在css3样式分类里)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .mask{
            /*让div占满整个屏幕*/
            position: fixed;
            top: 0;right: 0;
            bottom: 0;left: 0;

            background-color: rgba(55,55,55,.5);
        }
        .mask>p{
            width:300px; height:200px;
            background:#fff;
            /*让div在父容器居中*/
            position: absolute;
            top: 0;right: 0;
            bottom: 0;left: 0;
            margin: auto;

            text-align:center; line-height:1.5em;
            border-radius:10px;
            border:1px solid #edcf72;

            font-size:40px; font-weight:bold;
            padding-top:15px;
            font-family:Arial;
        }
        .mask>p>a{
            padding:10px;
            background:#9f8d77;
            color:#fff;
            border-radius: 6px;
            text-decoration: none;
        }

    </style>
</head>
<body>  
    <div class="mask">
        <p>
            GAME OVER!<br>
            SCORE: <span id="final">0</span><br>
            <a href="javascript:void(0)">TRY AGAIN!</a>
        </p>
    </div>

</body>
</html>

运行结果: