css+js点击事件制作弹出页面

最新推荐文章于 2024-05-09 13:39:43 发布

置顶我是药神!

最新推荐文章于 2024-05-09 13:39:43 发布

阅读量5.1k

点赞数 4

本文链接：https://blog.csdn.net/MB_xiemo/article/details/99062840

版权

小练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用css和js实现以下页面点击弹出一个小页面窗口

在这里插入图片描述
点击以后

点击按钮还能返回页面

接下来就开始利用js和css实现这个功能

首先先写一个页面,我就简单写成这样
在这里插入图片描述
通过display属性来控制里面的小页面

通过中间的span标签来控制小页面的display属性值
静态页面的代码

    body,
    html {
        height: 100%;
        margin: 0;
    }

    .main {
        height: 100%;
        background-color: red;
        /* text-align: center; */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main span {
        font-size: 18px;
        color: #fff;

    }

    .cover {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .cover>div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cover div div {
        width: 90%;
        height: 70%;
        background: yellow;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cover div div span {
        color: green;
        font-size: 18px;
    }

    #box{
        display: none;
    }
</style>

<body>
    <div class="main">
        <span id="hide">点开</span>
    </div>
    <div class="cover" id="box">
        <div>
            <div>
                <span id="Closehide">关闭</span>
            </div>
        </div>
    </div>
</body>

接下来我们写JS的代码

首先获取标签盒子的id名
在这里插入图片描述

写一个点击事件，当点击“点击”点开的时候，盒子的display值改为block，这样就可以点击了
在这里插入图片描述

点击以后就会变成

接下来和上面的一样写一个点击事件，当我们点击关闭的时候让他消失掉

这样就做完啦!
最终代码

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body,
    html {
        height: 100%;
        margin: 0;
    }

    .main {
        height: 100%;
        background-color: red;
        /* text-align: center; */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main span {
        font-size: 18px;
        color: #fff;

    }

    .cover {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .cover>div {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cover div div {
        width: 90%;
        height: 70%;
        background: yellow;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .cover div div span {
        color: green;
        font-size: 18px;
    }

    #box{
        display: none;
    }
</style>

<body>
    <div class="main">
        <span id="hide">点开</span>
    </div>
    <div class="cover" id="box">
        <div>
            <div>
                <span id="Closehide">关闭</span>
            </div>
        </div>
    </div>
    <script>
        var box = document.getElementById('box');
        var hide = document.getElementById('hide');
        var CloseHide = document.getElementById('Closehide');
        hide.onclick = function () {
            box.style.display = "block";
        }
        Closehide.onclick = function(){
            box.style.display = "none";
        }
    </script>
</body>

</html>

我是药神!

关注

4
点赞
踩
36

收藏

觉得还不错? 一键收藏
1
评论
css+js点击事件制作弹出页面

用css和js实现以下页面点击弹出一个小页面窗口点击以后点击按钮还能返回页面接下来就开始利用js和css实现这个功能首先先写一个页面,我就简单写成这样通过display属性来控制里面的小页面通过中间的span标签来控制小页面的display属性值静态页面的代码 body, html { height: 100%; margin...
复制链接

扫一扫

专栏目录