10种网页公告通知弹窗html源码

以下是10种网页公告通知弹窗的 HTML 源码示例：

1. 简洁的提示框

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>注意！</strong> 这是一个提示框。
</div>

2. 带有图标的提示框

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <i class="fa fa-exclamation-triangle"></i><strong>注意！</strong> 这是一个提示框。
</div>

3. 带有背景颜色的提示框

<div class="alert info">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>注意！</strong> 这是一个提示框。
</div>

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
}

.info {
  background-color: #2196F3;
}

4. 带有动画效果的提示框

<div class="alert success">
  <span class="closebtn">&times;</span>
  <strong>成功！</strong> 这是一个提示框。
</div>

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
  opacity: 1;
  transition: opacity 0.6s;
}

.success {
  background-color: #4CAF50;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

5. 带有自动关闭功能的提示框

<div class="alert">
  <strong>注意！</strong> 这是一个提示框。
</div>

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
  opacity: 1;
  transition: opacity 0.6s;
}

.alert.info {
  background-color: #2196F3;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* 自动关闭 */
.auto-close {
  animation: auto-close 5s linear;
}

@keyframes auto-close {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

6. 带有倒计时的提示框

<div class="alert">
  <strong>注意！</strong> 这是一个提示框。 <span class="countdown">5</span> 秒后自动关闭。
</div>

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  margin-bottom: 15px;
  opacity: 1;
  transition: opacity 0.6s;
}

.alert.info {
  background-color: #2196F3;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* 倒计时 */
.countdown {
  font-weight: bold;
  margin-left: 6px;
}

@keyframes countdown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

// JS 实现倒计时自动关闭
var timeleft = 5;
var countdown = setInterval(function(){
  timeleft--;
  document.querySelector(".countdown").textContent = timeleft;
  if (timeleft <= 0) {
    clearInterval(countdown);
    document.querySelector(".alert").classList.add("auto-close");
  }
}, 1000);

7. 带有链接的提示框

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>注意！</strong> 这是一个提示框。 <a href="#">更多信息</a>
</div>

8. 带有输入框的提示框

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>注意！</strong> 这是一个提示框。 <input type="text" placeholder="请输入内容">
</div>

9. 带有多个按钮的提示框

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>注意！</strong> 这是一个提示框。 
  <button class="btn">确定</button>
  <button class="btn">取消</button>
</div>

.btn {
  background-color: white;
  color: black;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  margin-left: 10px;
}

.btn:hover {
  background-color: #ddd;
}

10. 带有自定义样式的提示框

<div class="alert my-style">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
  <strong>注意！</strong> 这是一个提示框。
</div>

.alert.my-style {
  padding: 30px;
  background-color: #4CAF50;
  color: white;
  margin-bottom: 20px;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  border-radius: 5px;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}