html+css+js气泡弹窗

最新推荐文章于 2024-06-30 17:51:59 发布

睿智的海鸥

最新推荐文章于 2024-06-30 17:51:59 发布

阅读量892

点赞数 17

文章标签： html css javascript

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140057607

版权

界面图片没截好，实际字是很清晰的

点赞加关注，谢谢

源代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
position: relative;
overflow: hidden;
}

.popup-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
visibility: hidden;
opacity: 0;
transition: visibility 0s 1.5s, opacity 1.5s;
z-index: 1000;
}

.popup-container.visible {
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 1.5s;
}

.popup {
background: rgba(255, 255, 255, 0.7);
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
padding: 20px;
width: 300px;
max-height: 0;
overflow: hidden;
margin-top: 20px;
transition: max-height 0.5s ease-in-out, margin-top 0.5s ease-in-out;
}

.popup.open {
max-height: 400px;
margin-top: 0;
}

.popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}

.button {
border: none;
display: inline-block;
background: black;
color: white;
border-radius: 5px;
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
transition: box-shadow 0.3s ease-in-out;
}

.button:active {
box-shadow: none;
}
</style>
</head>
<body>

<div class="popup-overlay" id="popupOverlay"></div>
<div class="popup-container" id="popupContainer">
<div class="popup" id="popup">
<p>微信安装完成，点击查看</p>

</div>
</div>

// 添加类以显示弹出窗口和遮罩
popupContainer.classList.add('visible');
popup.classList.add('open');
popupOverlay.style.display = 'block';

// 设置1.5秒后自动关闭弹出窗口
setTimeout(() => {
popupContainer.classList.remove('visible');
popup.classList.remove('open');
popupOverlay.style.display = 'none';
}, 1500);
}

// 初始化时自动触发一次弹出窗口（如果需要）
// togglePopup(); // 取消注释以在页面加载时立即显示弹出窗口
</script>

</body>
</html>