JS — 04 弹出层案例

最新推荐文章于 2022-12-01 17:25:18 发布

小郭呀~

最新推荐文章于 2022-12-01 17:25:18 发布

阅读量102

点赞数

分类专栏： JS上课笔记

本文链接：https://blog.csdn.net/weixin_46448458/article/details/106723322

版权

JS上课笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

弹出层案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title></title>
    <style>
    	/*按钮样式*/
        input{
            width: 400px;
            height: 100px;
            background-color: pink;
            color: #fff;
            font-size: 50px;
        }
        /*遮盖层样式*/
        #cover{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.3);
        }
        /*弹窗样式*/
        #box{
            position: absolute;
            top: 0;
            left: 0 ;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 500px;
            height: 300px;
            background-color: #58a;
            color: #fff;
            font-size: 100px;
            line-height: 300px;
            text-align: center;
        }
    </style>
</head>
<body>
    <input type="button" value="点我弹出内容">
    <div id="wrap">
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
        随便写点内容<br>
    </div>
    <div id="cover">
        <div id="box">弹窗</div>
    </div>
    <script>
        let button = document.querySelector("input"),//通过选择器方式获取按钮
            cover = document.getElementById("cover"),//通过ID方式获取覆盖层
            box = document.getElementById("box");//通过ID方式获取弹窗
        button.onclick = function(){//点击按钮时覆盖层出现
            cover.style.display = "block";
        };
        box.onclick = function(){//点击弹窗时覆盖层出现
            cover.style.display = "none";
        };
        //关于float的兼容 => 兼容所有浏览器下面两条都要写
        button.style.cssFloat = "left";//兼容IE
        button.style.styleFloat = "left";//兼容标准浏览器
    </script>
</body>
</html>