การ แจ้งเตือน W3.CSS
คลาสw3-panelเป็นคลาสที่สมบูรณ์แบบสำหรับการแสดงการแจ้งเตือนทุกประเภท:
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
การแจ้งเตือนมักจะแสดงโดยใช้สีที่เข้ม:
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
ตัวอย่าง
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
แสดงคำเตือน
คำเตือน!
สีเหลืองมักบ่งบอกถึงคำเตือนที่อาจต้องให้ความสนใจ
คำเตือน!
สีเหลืองมักบ่งบอกถึงคำเตือนที่อาจต้องให้ความสนใจ
ตัวอย่าง
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that
might need attention.</p>
</div>
แสดงความสำเร็จ
ความสำเร็จ!
สีเขียวมักบ่งบอกถึงความสำเร็จหรือแง่บวก
ความสำเร็จ!
สีเขียวมักบ่งบอกถึงความสำเร็จหรือแง่บวก
ตัวอย่าง
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful
or positive.</p>
</div>
แสดงข้อมูล
ข้อมูล!
สีน้ำเงินมักบ่งบอกถึงการเปลี่ยนแปลงหรือการกระทำของข้อมูลที่เป็นกลาง
ข้อมูล!
สีน้ำเงินมักบ่งบอกถึงการเปลี่ยนแปลงหรือการกระทำของข้อมูลที่เป็นกลาง
ตัวอย่าง
<div class="w3-panel w3-blue">
<h3>Information!</h3>
<p>Blue often indicates a neutral
informative change or action.</p>
</div>
การใช้คอนเทนเนอร์
คลาสw3-containerสามารถใช้เพื่อแสดงการแจ้งเตือน:
ตัวอย่าง
<div class="w3-container w3-red">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
การแจ้งเตือนในทุกสี
การแจ้งเตือนมักแสดงเป็นสีพิเศษ แต่สามารถใช้สีใดก็ได้:
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
ตัวอย่าง
<div class="w3-panel w3-blue-grey">
<h3>Danger!</h3>
<p>Red often indicates a dangerous or negative situation.</p>
</div>
ปิดการแจ้งเตือน
หากต้องการปิดกล่องแจ้งเตือน ให้คลิกที่ X ที่มุมขวาบน:
อันตราย!
สีแดงมักบ่งบอกถึงสถานการณ์ที่เป็นอันตรายหรือด้านลบ
ในการสร้าง X ที่ปิดการแจ้งเตือน ให้เพิ่มองค์ประกอบ <span> ด้วย ปุ่มคลาส w3และ เหตุการณ์ onclick :
ตัวอย่าง
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">×</span>
เคล็ดลับ: HTML &ครั้ง; เอนทิตีเป็นไอคอนที่ต้องการสำหรับปุ่มปิด (แทนที่จะเป็นตัวอักษร "X")
การแจ้งเตือนแบบโค้งมน
ใช้ คลาส w3-roundหากคุณต้องการมุมมน:
ความสำเร็จ!
ที่นี่ใช้ w3-round
ความสำเร็จ!
ที่นี่ใช้ w3-round-large
ความสำเร็จ!
ที่นี่ใช้ w3-round-xxlarge
ตัวอย่าง
<div class="w3-panel w3-green w3-round">
แจ้งเตือนเป็นการ์ด
ใช้ คลาส w3-cardหากคุณต้องการให้การแจ้งเตือนแสดงเป็นการ์ด:
คำเตือน!
สีเหลืองมักบ่งบอกถึงบางสิ่งที่ต้องให้ความสนใจ
ตัวอย่าง
<div class="w3-panel w3-yellow w3-card-4">