html浮层，设置浮层透明度

SKM！！！

于 2023-05-23 10:44:19 发布

阅读量312

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/SKMNB/article/details/130822233

版权

使用场景，二维码过期，出现浮层覆盖二维码，并提示二维码失效

<!doctype html>
<html>
    <head>
        <!--引入JQuery文件-->
        <script src="../jquery-3.1.0.min.js"></script>
        <title>浮层的简单原理</title>
        <style>
        /*body初始状态,清间距,设置背景*/
        body
        {
            margin: 0;
            padding: 0;
            background-color: silver;
        }
        /*超链接的样式:蓝色按钮*/
        a
        {
            display: inline-block;
            width: 100px;
            height: 50px;
            font:normal normal normal 18px/50px 'Microsoft Yahei';
            background-color: #00b3ee;
            text-align: center;
            margin: 100px 200px;
            text-decoration: none;
            border-radius: 5px;
        }
        /*人为制造一个占据整个屏幕的Div,其透明度为0.7且z-index为9999使之前的页面被压在底层无法点击*/
        #fullScreen
        {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            opacity: 0.7;
            background-color: red;
            z-index: 9999;
        }
        /*浮层,可随意设置大小宽高，但是z-index必须比上面fullScreen大才能显示出来*/
        #floatLayer
        {
            position: fixed;
            width: 200px;
            height: 200px;
            left: 34%;
            top: 15%;
            background-color:rgba(00,22,33,0.5);
            z-index: 10000;
        }
        </style>
    </head>
    <body>
        <a href="#" id="show">出现浮层</a>
    </body>
</html>
<script>
    $("document").ready(function()
    {
        //点击弹出浮层
        $("#show").click(function()
        {
            //清除之前的样式
            $("#fullScreen,#floatLayer").remove();
            $("body").append
            (
                //占据整个屏幕Div
                "<div id='fullScreen'></div>"+
                //浮层区
                "<div id='floatLayer'>" +
                    "<a href='#' id='hide'>隐藏浮层</a>"+
                "</div>"
            );
            //隐藏浮层
            $("#hide").click(function()
            {
                $("#fullScreen,#floatLayer").remove();
            });
        });
    });
</script>