如何使用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>
上面的代码主要分为三部分: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效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。