上周使用Python写了一个弹窗，阅读量挺高的这周闲的没事在发一个HTML的吧，下面是代码和过程。

用户点击"确定"按钮 → 隐藏初始弹窗 → 执行后续互动效果

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <script>
var _czc = _czc || [];
(function () {
	var um = document.createElement("script");
	um.src = "https://v1.cnzz.com/z.js?id=1281334347&async=1";

	var s = document.getElementsByTagName("script")[0];
	s.parentNode.insertBefore(um, s);
})();

</script>
  <title>一份神秘礼物🎃</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="xiaohu/css/css2?family=Noto+Sans+SC:wght@400%3B600%3B800&amp;display=swap.css" rel="stylesheet">
  <link rel="stylesheet" href="xiaohu/css/styles.css">

</head>
<body>
  <div id="app">
    <div class="modal-backdrop" id="start-backdrop" aria-hidden="false">
      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
        <div class="titlebar">
          <span class="icon">🎃</span>
          <span class="title" id="modal-title">神秘的礼物</span>
        </div>
        <div class="content">您有一份神秘礼物，确定要打开吗？</div>

        <div class="actions">
          <button class="btn primary" id="confirm-btn" autofocus>确定</button>
        </div>
      </div>
    </div>
    <div id="popup-layer" aria-live="polite" aria-atomic="false"></div>

    

    
    <div id="float-balls" style="display: none;">
      <a href="这里是更多跳转的地方" target="_blank" class="float-ball" id="ball-more">
        <span>更多</span>
      </a>
    </div>
  </div>


  <audio id="bgMusic" preload="auto">

    <source src=" 这里写音乐的链接哈">
  </audio>
  <script src="xiaohu/js/1.js"></script>
  <script src="xiaohu/js/app.js"></script>
</body>
</html>

新建一个文件夹命名可以自己更改哈（需要在HTML中更改文件夹名名称）

/* 基础样式重置 */
* {
  margin: 0;

  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: 'Noto Sans SC', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;

  overflow: hidden;
  position: relative;

}

#app {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* 模态框背景 */
.modal-backdrop {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;

  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

/* 模态框 */
.modal {
  background: white;

  border-radius: 15px;
  padding: 30px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 90%;
  text-align: center;

  animation: modalSlideIn 0.5s ease-out;
}

@keyframes modalSlideIn {
  from {

    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;

}


.icon {

  font-size: 2.5rem;
  margin-right: 10px;
}


.title {
  font-size: 1.8rem;

  font-weight: 800;
  color: #333;
}

.content {

  font-size: 1.1rem;
  color: #666;
  margin-bottom: 30px;

  line-height: 1.6;
}

.actions {
  display: flex;
  justify-content: center;

  gap: 15px;
}


.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;

}

.btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);

  color: white;
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);

}

.btn.primary:active {
  transform: translateY(0);
}


/* 弹窗层 */
#popup-layer {
  position: fixed;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  z-index: 999;

}


/* 弹窗样式 */
.popup {
  position: absolute;
  background: white;
  border-radius: 10px;
  padding: 15px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  animation: popupFadeIn 0.5s ease-out;
  pointer-events: auto;
  max-width: 200px;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.3);
  z-index: 1;

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.popup:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  z-index: 2;

}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);

  }
}

.popup-content {

  font-size: 14px;
  font-weight: 600;

  color: #333;
}

/* 浮动小球 */
#float-balls {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.float-ball {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;

  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);

}

.float-ball:hover {
  transform: translateY(-5px) scale(1.1);

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 1);
}

.float-ball span {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}



/* 响应式设计 */
@media (max-width: 768px) {
  .modal {
    padding: 20px;
    margin: 20px;
  }
  
  .title {
    font-size: 1.5rem;
  }
  
  .icon {
    font-size: 2rem;

  }
  
  .content {
    font-size: 1rem;
  }
  
  .btn {
    padding: 10px 25px;
    font-size: 0.9rem;
  }

  
  #float-balls {
    bottom: 20px;

    right: 20px;
  }

  
  .float-ball {
    width: 50px;
    height: 50px;
  }
  
  .float-ball span {

    font-size: 11px;
  }

}

@media (max-width: 480px) {
  .modal {
    padding: 15px;
  }
  
  .title {
    font-size: 1.3rem;
  }
  
  .icon {
    font-size: 1.8rem;
  }
  
  .content {
    font-size: 0.9rem;
  }
  
  .btn {
    padding: 8px 20px;
    font-size: 0.8rem;
  }
}

// 基础工具函数
const Utils = {
  // 随机数生成
  random: function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;

  },

  
  // 随机颜色生成
  randomColor: function() {
    const colors = [
      'lightpink', 'skyblue', 'lightgreen', 'lavender',
      'lightyellow', 'plum', 'coral', 'bisque', 'aquamarine',
      'mistyrose', 'honeydew', 'lavenderblush', 'oldlace'
    ];
    return colors[this.random(0, colors.length - 1)];
  },
  
  // 温馨提示语
  tips: [
    '多喝水哦~', '保持微笑呀', '每天都要元气满满',
    '记得吃水果', '保持好心情', '好好爱自己', '我想你了',
    '梦想成真', '期待下一次见面', '金榜题名',
    '顺顺利利', '早点休息', '愿所有烦恼都消失',
    '别熬夜', '今天过得开心嘛', '天冷了，多穿衣服'
  ],

  
  // 随机提示
  randomTip: function() {
    return this.tips[this.random(0, this.tips.length - 1)];

  },
  
  // 防抖函数
  debounce: function(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }
};

// 主应用逻辑
class MysteryGiftApp {
  constructor() {
    this.isPlaying = false;
    this.popupCount = 0;
    this.maxPopups = 400;
    this.popupInterval = null;
    this.audio = document.getElementById('bgMusic');
    this.startBackdrop = document.getElementById('start-backdrop');
    this.confirmBtn = document.getElementById('confirm-btn');
    this.popupLayer = document.getElementById('popup-layer');
    this.floatBalls = document.getElementById('float-balls');
    
    this.init();
  }
  
  init() {
    this.bindEvents();
    this.setupAudio();
  }

  
  bindEvents() {
    // 确认按钮点击事件
    this.confirmBtn.addEventListener('click', () => {
      this.startExperience();
    });
    
    // 键盘事件 - 回车键确认
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && !this.isPlaying) {
        this.startExperience();
      }

    });
    
    // 窗口大小变化时重新布局
    window.addEventListener('resize', Utils.debounce(() => {

      this.repositionPopups();

    }, 250));

  }
  
  setupAudio() {
    // 设置音频属性
    this.audio.volume = 0.8;
    this.audio.loop = true;
    
    // 音频加载完成事件
    this.audio.addEventListener('canplaythrough', () => {

      console.log('音频加载完成');
    });
    
    // 音频错误处理
    this.audio.addEventListener('error', (e) => {
      console.error('音频加载错误:', e);
    });
    

    // 音频结束事件
    this.audio.addEventListener('ended', () => {
      this.showCompletionMessage();
    });
  }
  
  startExperience() {
    this.isPlaying = true;
    
    // 隐藏开始模态框
    this.startBackdrop.style.display = 'none';
    this.startBackdrop.setAttribute('aria-hidden', 'true');
    

    // 显示浮动小球
    this.floatBalls.style.display = 'flex';
    
    // 开始播放音乐
    this.playMusic();
    
    // 开始弹窗
    this.startPopups();
  }
  
  playMusic() {
    const playPromise = this.audio.play();
    
    if (playPromise !== undefined) {
      playPromise.catch(error => {
        console.log('自动播放被阻止，需要用户交互');
        
        // 用户交互后播放
        const startOnInteraction = () => {
          this.audio.play().catch(e => {
            console.error('播放失败:', e);
          });
          document.removeEventListener('click', startOnInteraction);
          document.removeEventListener('keydown', startOnInteraction);

        };
        
        document.addEventListener('click', startOnInteraction, { once: true });
        document.addEventListener('keydown', startOnInteraction, { once: true });
      });
    }
  }
  
  startPopups() {
    // 立即创建第一个弹窗
    this.createPopup();
    
    // 设置定时器持续创建弹窗
    this.popupInterval = setInterval(() => {

      if (this.popupCount < this.maxPopups && this.isPlaying) {
        this.createPopup();
      } else {
        this.stopPopups();
        if (this.popupCount >= this.maxPopups) {
          this.showCompletionMessage();
        }
      }
    }, 300);
  }
  
  createPopup() {
    if (this.popupCount >= this.maxPopups) return;
    
    const popup = document.createElement('div');
    popup.className = 'popup';
    
    // 随机位置
    const screenWidth = window.innerWidth;

    const screenHeight = window.innerHeight;
    const popupWidth = 200;
    const popupHeight = 80;
    
    // 允许叠加，直接随机位置
    const x = Utils.random(0, screenWidth - popupWidth);
    const y = Utils.random(0, screenHeight - popupHeight);
    
    // 随机内容和颜色
    const tip = Utils.randomTip();
    const bgColor = Utils.randomColor();
    
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.style.backgroundColor = bgColor;
    
    popup.innerHTML = `
      <div class="popup-content">${tip}</div>
    `;
    
    // 点击移除
    popup.addEventListener('click', () => {
      this.removePopup(popup);
    });
    
    this.popupLayer.appendChild(popup);
    this.popupCount++;
    
    // 移除自动消失的定时器，弹窗将永久显示
  }
  
  removePopup(popup) {
    popup.style.animation = 'popupFadeOut 0.5s ease-out forwards';
    setTimeout(() => {
      if (popup.parentNode) {
        popup.parentNode.removeChild(popup);
        this.popupCount--;

      }
    }, 500);
  }
  
  // 不再需要重叠检测，允许弹窗叠加显示
  
  repositionPopups() {
    const popups = document.querySelectorAll('.popup');
    popups.forEach(popup => {
      const rect = popup.getBoundingClientRect();
      if (rect.right > window.innerWidth || rect.bottom > window.innerHeight) {
        // 重新定位超出边界的弹窗

        popup.style.left = Utils.random(0, window.innerWidth - rect.width) + 'px';
        popup.style.top = Utils.random(0, window.innerHeight - rect.height) + 'px';
      }

    });
  }
  
  stopPopups() {
    if (this.popupInterval) {
      clearInterval(this.popupInterval);
      this.popupInterval = null;
    }
  }
  
  showCompletionMessage() {
    const message = document.createElement('div');
    message.className = 'popup completion-message';
    message.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 40px;
      border-radius: 20px;
      text-align: center;
      font-size: 2rem;
      z-index: 1002;
      max-width: 80%;
    `;
    
    message.innerHTML = `
      <div>神秘礼物体验完成！</div>
      <div style="font-size: 1rem; margin-top: 20px;">感谢您的参与</div>
    `;
    
    document.body.appendChild(message);
    
    // 点击关闭
    message.addEventListener('click', () => {
      message.style.animation = 'popupFadeOut 0.5s ease-out forwards';
      setTimeout(() => {
        if (message.parentNode) {
          message.parentNode.removeChild(message);
        }
      }, 500);
    });
  }

}

// 页面加载完成后初始化应用
document.addEventListener('DOMContentLoaded', () => {

  new MysteryGiftApp();

});

// 添加弹窗淡出动画
const style = document.createElement('style');
style.textContent = `
  @keyframes popupFadeOut {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0.8);
    }
  }
`;
document.head.appendChild(style);

首先来到腾讯云官网购买一台轻量应用服务器，现在有活动可以白嫖哈。

来到控制台找到轻量应用服务器进去

选择Ubuntu或者Debian系统都可以哈设置好密码重装完系统

来到装完系统的服务器控制面板，点击网站-新建站点完成添加

来到文件-点击刚刚创建的文件夹进入，上传最上面的代码打包的压缩包，解压

至此搞定，输入你的域名去访问吧。

搭建过程中会出现报错或无法访问复制错误的界面问AI或者查询解决办法即可。评论区留言问题看见会回复

使用腾讯云轻量应用服务器HTML、CSS给搭建一个网页版温馨弹窗教程

产品KOL

编程语言

前端

学习HTML弹窗制作教程，实现万圣节主题神秘礼物互动效果。包含全屏模态窗口、响应式设计、背景音乐控制、随机提示弹窗等交互功能。提供完整HTML、CSS和JS代码，适合前端开发初学者练习网页特效与用户交互设计。

轻量应用服务器

响应式设计

服务器

Python

Ubuntu

Debian

4核4G3M云服务器 新用户低至38元/年！

lighthouse

域名特惠新用户低至1元！


domain

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

使用腾讯云轻量应用服务器HTML、CSS给搭建一个网页版温馨弹窗教程

使用腾讯云轻量应用服务器HTML、CSS给搭建一个网页版温馨弹窗教程

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐