《CSS实战案例汇总》弹窗
Posted la_vie_est_belle
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《CSS实战案例汇总》弹窗相关的知识，希望对你有一定的参考价值。
弹窗
实现效果
html代码
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<button onclick="openPopup()">打开弹窗</button>
<div class="popup">
<div class="close" onclick="closePopup()">×</div>
这是一个弹窗ヾ(≧∇≦*)ゝ
</div>
</body>
<script src="demo.js"></script>
</html>1. button元素有一个onclick属性，当用户点击后就会触发openPopup()函数，弹窗就会被打开。
2. 在类名为popup的div元素中有一个div元素被作为关闭按钮，当用户点击该元素后，弹窗就会被关闭。
3. ×是html字符实体，也就是乘号×，不是字母x。
CSS代码
/* 弹窗样式 */
.popup {
width: 500px;
height: 200px;
background-color: white;
border-radius: 5px;
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
position: absolute;
left: 470px;
top: 100px;
/* 内部元素水平垂直居中 */
/* 默认不显示 */
display: none;
align-items: center;
justify-content: center;
}
/* 弹窗上的关闭元素样式 */
.close {
position: absolute;
left: 6px;
top: 0;
cursor: pointer;
text-decoration: none;
}1. 弹窗的重点在于display值，如果该值为none，则可以隐藏弹窗。
2. 当然如果不使用display的话，我们也可以在html代码中使用hidden属性来实现相同效果。
3. cursor: pointer; 可以让鼠标移动到关闭按钮上时变成一只手，看上去更有按钮的样子。
JS代码
// 打开弹窗
function openPopup () {
let popup = document.getElementsByClassName('popup')[0]
popup.style.display = 'flex'
}
// 关闭弹窗
function closePopup () {
let popup = document.getElementsByClassName('popup')[0]
popup.style.display = 'none'
}
1. 当用户点击打开弹窗按钮时，将popup元素css中的display值修改为flex，使其可见。
2. 当用户点击弹窗上的关闭按钮时，将popup元素css中的display值修改为none，使其不可见。
以上是关于《CSS实战案例汇总》弹窗的主要内容，如果未能解决你的问题，请参考以下文章