HTML+CSS+JS精美气泡提示框

睿智的海鸥

于 2024-07-21 22:10:10 发布

阅读量528

点赞数 21

文章标签： html css javascript 前端 css3

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

版权

源代码在效果图后面点赞❤️关注💛收藏⭐️

主要实现：提示框出现和消失两种丝滑动画弹出气泡提示框后延迟2秒自动消失

效果图

错误框

正确

警告

提示

源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web界面</title>
  <style>
    .panel {
      border-radius: 10px;
      margin: 10px 0;
      padding: 15px;
      cursor: pointer;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .green {
      background-color: #e0f7e0;
      border: 2px solid #4caf50;
    }

    .red {
      background-color: #ffebee;
      border: 2px solid #f44336;
    }

    .orange {
      background-color: #fff3e0;
      border: 2px solid #ff9800;
    }

    .blue {
      background-color: #e3f2fd;
      border: 2px solid #2196f3;
    }

    .bubble {
      position: fixed;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      padding: 15px 16px;
      border-radius: 10px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      width: 300px;
      text-align: center;
      opacity: 0;
      transition: all 1s ease;
    }
  </style>
</head>
<body>
<h1>气泡提示框示例</h1>
<h3>警告框</h3>
<h3>提示框</h3>
<h3>错误框</h3>
<h3>正确框</h3>
  <div class="panel orange" onclick="showBubble('警告框')">点我弹出警告框</div>
  <div class="panel blue" onclick="showBubble('提示框')">点我弹出提示框</div>
  <div class="panel green" onclick="showBubble('正确框')">点我弹出正确框</div>
  <div class="panel red" onclick="showBubble('错误框')">点我弹出错误框</div>

  <div id="bubble" class="bubble"></div>

  <script>
    function showBubble(type) {
      let bubble = document.getElementById('bubble');
      bubble.classList.remove('green', 'red', 'orange', 'blue');
      bubble.classList.add(getClass(type));
      bubble.textContent = getContent(type);
      bubble.style.top = '80px';
      bubble.style.opacity = '1';

      setTimeout(function() {
        bubble.style.top = '-100px';
        bubble.style.opacity = '0';
      }, 2000);
    }

    function getClass(type) {
      switch (type) {
        case '警告框':
          return 'orange';
        case '提示框':
          return 'blue';
        case '正确框':
          return 'green';
        case '错误框':
          return 'red';
        default:
          return '';
      }
    }

    function getContent(type) {
      switch (type) {
        case '警告框':
          return '这是一个警告框';
        case '提示框':
          return '这是一个提示框';
        case '正确框':
          return '这是一个正确框';
        case '错误框':
          return '这是一个错误框';
        default:
          return '';
      }
    }
  </script>
</body>
</html>