html+css+js气泡弹窗

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

点赞加关注,谢谢

源代码

<!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>

<button class="button" οnclick="togglePopup()">弹出</button>

<div class="popup-overlay" id="popupOverlay"></div>

<div class="popup-container" id="popupContainer">

<div class="popup" id="popup">

<p>微信安装完成,点击查看</p>

<!-- 注意:这里没有"确认"按钮,因为我们将使用延迟自动关闭 -->

</div>

</div>

<script>

function togglePopup() {

const popupContainer = document.getElementById('popupContainer');

const popup = document.getElementById('popup');

const popupOverlay = document.getElementById('popupOverlay');

// 添加类以显示弹出窗口和遮罩

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>

相关推荐
沙尘暴炒饭13 分钟前
vuex持久化vuex-persistedstate,存储的数据刷新页面后导致数据丢失
开发语言·前端·javascript
2401_8370885015 分钟前
CSS清楚默认样式
前端·javascript·css
前端大白话2 小时前
前端人速码!10个TypeScript神仙技巧,看完直接拿捏项目实战
前端·javascript·typescript
前端大白话2 小时前
前端必看!10个React实战技巧让你代码起飞,附超详细注释
前端·javascript·react.js
前端大白话2 小时前
前端必学!10 个超实用 Vue3 实战技巧大放送
前端·javascript·vue.js
谦谦橘子2 小时前
手写react-router,理解react-router原理
前端·javascript·react.js
zhu_zhu_xia2 小时前
JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示
javascript·3d·webgl
BillKu2 小时前
Vue3父子组件数据同步方法
前端·javascript·vue.js
七月丶2 小时前
❌ 别再用接口文档开发了!我改用“Mock-First”后爽到飞起
前端·javascript·后端
七月丶2 小时前
🗑 写了 2000 行代码,结果自己全删了。
前端·javascript·后端