การสร้าง: ข้อความเตือน

เรียนรู้ว่าจะใช้ CSS ที่สร้างข้อความเตือน

สร้างข้อความเตือน

ขั้นที่ 1 - เพิ่ม 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 entity "×" ที่สร้างตัวอักษร "x"。

ขั้นที่ 2 - เพิ่ม CSS：

ตั้งค่าสไตล์ของกล่องเตือนและปุ่มปิด

/* กล่องข้อความเตือน */
.alert {
  padding: 20px;
  background-color: #f44336; /* สีแดง */
  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;
}

亲自试一试

ข้อความเตือนหลายข้อ

หากมีข้อความเตือนหลายข้อบนหน้าเว็บ คุณสามารถเพิ่มสคริปต์ดังนี้เพื่อใช้โดยไม่ต้องใช้ <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>

亲自试一试

相关页面

教程：如何创建便签