အကြိမ့်အားမျှချက် ဖန်တီးပါ

CSS ကို အကြိမ့်အားမျှချက် ဖန်တီးပါ

အကြိမ့်အားမျှချက် ဖန်တီးပါ

ပထမပိုင်း - စက်တင် HTML：

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

အကြိမ့်အားမျှချက်ကို ပိတ်ဖျက်ရန် အပ်ချက်တစ်ခု ထပ်ထည့်ပါ onclick ဗီဇက္ခတ် အရာအသားတွင် ဖြစ်ပါသည် သတိပုံးသည် "ကျွန်တော်ကို သတ်မှတ်သော အရာအသားကို ဖုံးကိုင်ပါ" - ကိုယ်စားပုံး <div class="alert">。

အကြိမ့်အားမျှချက်：HTML အကြိမ်မှား "×" ကို စာလ် "x" ကို ဖန်တီးပါ

ဒုတိယပိုင်း - စက်တင် CSS：

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

/* 警告消息框 */
.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;
}

亲自试一试

多个警告

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

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

实例

亲自试一试

相关页面

教程：如何创建便签