كيفية إنشاء: رسائل التحذير

تعلم كيفية استخدام CSS لإنشاء رسائل التحذير.

إنشاء رسالة التحذير

الخطوة الأولى - إضافة HTML:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  هذا هو مربع التحذير.
</div>

إذا كنت ترغب في إغلاق رسالة التحذير، أضف onclick خصائص <span> العنصر، يمثل الخاصية "عندما تقوم بالنقر علىي، قم بإخفاء العنصر الأبوي" - أي المكون <div class="alert">.

إشارة إلى:استخدام رمز HTML "×" لإنشاء الحرف "x".

الخطوة الثانية - إضافة 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>
// الحصول على جميع العناصر بناءً على الصنف "closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// مرور جميع أزرار الإغلاق مرورًا عبر جميع أزرار الإغلاق
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>

جرب بنفسك

صفحات ذات صلة

دليل:كيفية إنشاء اللاصقة