css实现点击椒弹出div

如何使用CSS实现点击椒弹出DIV呢？


    <!DOCTYPE html>
    <html>
    <head>
        <title>CSS点击弹出DIV</title>
        <style>
            .Box {
                display: none;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                padding: 20px;
                background-color: #fff;
                border: 1px solid #ccc;
            }
            .active-Box {
                display: block;
            }
        </style>
    </head>
    <body>
        <button id="button">点击弹出DIV</button>
        <div id="Box" class="Box">
            <p>这是要弹出的DIV</p>
        </div>
        <script>
            const button = document.getElementById('button');
            const Box = document.getElementById('Box');

            button.onclick = () => {
                Box.classList.toggle('active-Box');
            }
        </script>
    </body>
    </html>

css实现点击椒弹出div

上面的代码主要分为三部分：HTML，CSS和JavaScript。

首先，在HTML中，我们定义了一个button（按钮）和一个要弹出的DIV（id为“Box”）。

其次，在CSS中，我们将Box的display属性设置为none，在初始状态下不显示。当button被点击时，我们使用JavaScript来添加一个名为“active-Box”的class来显示 Box。

最后，在JavaScript中，我们使用getElementById方法来获取button和Box。当用户单击按钮时，我们使用toggle方法来在“classed - Box”类中切换类，从而显示或隐藏框。

到此，我们已经成功地使用CSS实现了点击弹出DIV效果。

css实现点击椒弹出div

相关文章