js 窗口漂浮练习

最新推荐文章于 2023-10-08 22:25:17 发布

小布很生气

最新推荐文章于 2023-10-08 22:25:17 发布

阅读量583

点赞数

分类专栏：日常练习

本文链接：https://blog.csdn.net/weixin_42100915/article/details/80518823

版权

日常练习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>漂浮</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .a{
        width:100%;
        height: 50px;
        background-color: black;
        /*font-size: 10px;*/
        display: block;
    }
    .b{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        background-color: cornflowerblue;
        opacity: 0.3;
        display: none;
    }
    .c{
        position:fixed;
        width:300px;
        height:200px;
        top:50%;
        left: 50%;
        background-color: aliceblue;
        margin-left: -200px;
        margin-top: -50px;
        display: none;
    }
    .v{
        display: inline-block;
    }
</style>
<body>
<div class="a">
<button οnclick="push()">push</button>
</div>
<div class="b"></div>
<div class="c">
    <button οnclick="cl()">close</button>
</div>


<script>
    var ele=document.getElementsByClassName("b")[0];
    var ele2=document.getElementsByClassName("c")[0];
    function push() {
        ele.classList.add("v");
        ele2.classList.add("v");
    }
    function cl() {
        ele.classList.remove("v");
        ele2.classList.remove("v");
    }

</script>


</body>
</html>

小布很生气

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 窗口漂浮练习

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;漂浮&lt;/title&gt;&lt;/head&gt;&lt;style&gt; *{ marg
复制链接

扫一扫