كيف - التنبيهات
تعرف على كيفية إنشاء رسائل تنبيه باستخدام CSS.
تنبيهات
يمكن استخدام رسائل التنبيه لإعلام المستخدم بشيء خاص: الخطر أو النجاح أو المعلومات أو التحذير.
×
خطر! يشير إلى عمل خطير أو سلبي محتمل.
×
نجاح! يشير إلى عمل ناجح أو إيجابي.
×
معلومات! يشير إلى تغيير أو إجراء إعلامي محايد.
×
تحذير! يشير إلى تحذير قد يحتاج إلى عناية.
إنشاء رسالة تنبيه
الخطوة 1) أضف HTML:
مثال
<div class="alert">
<span class="closebtn"
onclick="this.parentElement.style.display='none';">×</span>
This is an alert box.
</div>
إذا كنت تريد القدرة على إغلاق رسالة التنبيه ، فأضف عنصر <span> بسمة onclick
تقول "عند النقر فوقي ، قم بإخفاء العنصر الرئيسي" - وهي الحاوية <div> (class = "alert").
نصيحة: استخدم كيان HTML " ×
" لإنشاء الحرف "x".
الخطوة 2) أضف CSS:
صمم مربع التنبيه وزر الإغلاق:
مثال
/* The alert message box */
.alert {
padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
}
/* The 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
moving the mouse over the close button */
.closebtn:hover {
color: black;
}
العديد من التنبيهات
إذا كان لديك العديد من رسائل التنبيه على الصفحة ، فيمكنك إضافة البرنامج النصي التالي لإغلاق التنبيهات المختلفة دون استخدام سمة onclick في كل عنصر من عناصر <span>.
وإذا كنت تريد أن تتلاشى التنبيهات ببطء عند النقر عليها ، فأضف opacity
إلى transition
الفصل alert
الدراسي:
مثال
<style>
.alert {
opacity: 1;
transition: opacity 0.6s; /* 600ms to 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++) {
// When someone clicks on a close button
close[i].onclick =
function(){
// Get the
parent of <span class="closebtn"> (<div class="alert">)
var div = this.parentElement;
// Set the opacity of div to
0 (transparent)
div.style.opacity = "0";
// Hide the div after 600ms
(the same amount of milliseconds it takes to fade out)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
نصيحة: راجع الملاحظات أيضًا .