Nasıl oluşturulur: Uyarı mesajı

CSS ile uyarı mesajları nasıl oluşturulur öğrendiğinizi öğrenin.

Uyarı

Uyarı mesajları, kullanıcıya bazı özel konular hakkında bildirimde bulunmak için kullanılabilir: tehlike, başarı, bilgi veya uyarı.

× Tehlikeli！tehlikeli veya olumsuz etkiye neden olabilecek işlemleri ifade eder.
× Başarılı！başarılı veya olumlu işlemleri ifade eder.
× Bilgi！nötr bilgi değişiklikleri veya işlemleri ifade eder.
× Uyarı！dikkat edilmesi gereken uyarıları ifade eder.

Kişisel olarak deneyin

Uyarı mesajı oluşturun

İlk adım - HTML ekleyin：

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  Bu bir uyarı kutusudur.
</div>

Uyarı mesajını kapatmak istiyorsanız, bir ekle onclick özniteliklerinin <span> öğesi, bu özellik "Ben tıkladığımda ebeveynimi gizle" - yani konteyneri ifade eder <div class="alert">。

İpucu：HTML karakteri "×" kullanarak "x" harfi oluşturun。

İkinci adım - CSS ekleyin：

设置警告框和关闭按钮的样式：

/* 警告消息框 */
.alert {
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}
/* 关闭按钮 */
.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;
}

Kişisel olarak deneyin

多个警告

如果页面上有多个警告消息，您可以添加以下脚本，以在不使用每个 <span> 元素的 onclick 属性的情况下关闭不同的警告。

并且，如果您希望点击警告时它们缓慢淡出，请将不透明度和过渡添加到 alert 类中：

实例

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600 毫秒淡出 */
}
</style>
<script>
// 获取所有 class="closebtn" 的元素
var close = document.getElementsByClassName("closebtn");
var i;
// 循环遍历所有关闭按钮 Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // 遍历所有关闭按钮
  close[i].onclick = function(){
    // 获取<span class="closebtn">的父元素（<div class="alert">）
    var div = this.parentElement;
    // 设置 div 的不透明度为 0（透明）
    div.style.opacity = "0";
    // 600 毫秒后隐藏 div（与淡出所需的时间相同）
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

Kişisel olarak deneyin

İlgili sayfalar

Eğitim:Nasıl oluşturulur: Etiket