如何创建：警告消息

学习如何使用 CSS 创建警告消息。

警告

警告消息可用于通知用户一些特殊事项：危险、成功、信息或警告。

× 危险！表示危险或可能产生负面影响的操作。
× 成功！表示成功或积极的操作。
× 信息！表示中性的信息更改或操作。
× 警告！表示可能需要注意的警告。

Δοκιμάστε το προσωπικά

创建警告消息

第一步 - 添加 HTML：

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  This is an alert box.
</div>

如果您希望能够关闭警告消息，请添加一个带有 onclick 属性的 <span> 元素，该属性表示“当您单击我时，隐藏我的父元素” - 即容器 <div class="alert">。

提示：使用 HTML 实体 "×" 创建字母 "x"。

第二步 - 添加 CSS：

Set the styles for the warning box and close button:

/* Warning message box */
.alert {
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}
/* Close button */
.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}
/* When the mouse moves over the close button */
.closebtn:hover {
  color: black;
}

Δοκιμάστε το προσωπικά

multiple warnings

If there are multiple warning messages on the page, you can add the following script to <span> of the onclick properties to close different warnings.

And if you want the warnings to fade out slowly when clicked, add opacity and transition to alert In class:

Example

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600 milliseconds fade out */
}
</style>
<script>
// Get all elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// Loop through all close buttons
for (i = 0; i < close.length; i++) {
  // Traverse all close buttons
  close[i].onclick = function(){
    // Get the parent element of <span class="closebtn"> (<div class="alert">)
    var div = this.parentElement;
    // Set div's opacity to 0 (transparent)
    div.style.opacity = "0";
    // 600 milliseconds later hide div (same as fade out time)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}
</script>

Δοκιμάστε το προσωπικά

Σχετικές σελίδες

Εκμάθηση:Πώς να δημιουργήσω σημειωματάριο