كود رسائل تنبيهية Flash Messages بتصميم احترافي HTML CSS JavaScript
في هذا المقال أشارككم كود رسائل تنبيهية أو ما يعرف باسم Flash Messages، وهو من الأكواد الصغيرة التي أحب استخدامها كثيراً داخل المواقع لأنها تعطي المستخدم إحساساً أن الموقع تفاعلي ومنظم.
أحياناً يكون الفرق بين موقع عادي وموقع مريح هو رسالة صغيرة تظهر بعد الضغط على زر، مثل رسالة نجاح عند حفظ البيانات أو رسالة خطأ عند وجود مشكلة. هذه التفاصيل الصغيرة ترفع تجربة المستخدم بشكل ملحوظ.
أكثر شيء يعجبني في هذا النوع من الأكواد أنه بسيط، لكنه يعطي لمسة احترافية واضحة. بدل أن يضغط الزائر على زر ولا يعرف هل حدث شيء أم لا، تظهر له رسالة مباشرة تخبره بما حصل.
01 ما هي رسائل Flash Messages؟
رسائل Flash Messages هي إشعارات قصيرة تظهر في واجهة الموقع بعد تنفيذ إجراء معين. مثلًا عندما يرسل المستخدم نموذج تواصل، يمكن أن تظهر رسالة تقول: "تم الإرسال بنجاح". وإذا حدث خطأ، تظهر رسالة أخرى توضح أن هناك مشكلة.
الفكرة ليست مجرد شكل جمالي، بل وسيلة مهمة لتوجيه المستخدم ومنع الحيرة أثناء استخدام الموقع.
02 متى تحتاج إلى هذا الكود؟
- عند إنشاء نموذج تسجيل أو تسجيل دخول
- عند إضافة زر نسخ كود أو رابط
- عند بناء لوحة تحكم بسيطة أو تعديل عناصر الواجهة مثل إخفاء المشاركات الشائعة في قالب Contempo
- عند تصميم متجر إلكتروني أو صفحة طلب
- عند عرض تنبيهات نجاح أو خطأ أو تحذير داخل الموقع
- عند إتمام عملية شراء أو دفع إلكتروني
- عند إرسال نموذج اتصال أو استبيان
- عند حفظ الإعدادات في لوحة التحكم
03 لماذا هذا الكود مناسب للمبتدئين؟
الكود لا يحتاج إلى مكتبات خارجية مثل jQuery أو Bootstrap، فهو مبني فقط باستخدام HTML وCSS وJavaScript. وهذا ما يجعله خفيفًا وسهل التعديل.
يمكنك تغيير الألوان، النصوص، مدة ظهور الرسالة، مكان ظهورها، وحجمها بسهولة من داخل الكود نفسه دون الحاجة لخبرة برمجية كبيرة.
04 مميزات كود الرسائل التنبيهية
- ✅ تصميم حديث بألوان واضحة
- ✅ يدعم أربع حالات: نجاح، خطأ، تحذير، معلومات
- ✅ يظهر ويختفي بحركة ناعمة
- ✅ يمكن إغلاق الرسالة يدويًا
- ✅ مناسب لمواقع بلوجر والمواقع العادية
- ✅ سهل التعديل ولا يحتاج خبرة كبيرة
- ✅ لا يؤثر على سرعة الموقع
- ✅ متوافق مع جميع المتصفحات والأجهزة، خاصة عندما يكون القالب متجاوب أصلًا بالجوال
05 تجربتي مع هذا النوع من الأكواد
من تجربتي، وجود رسالة تنبيه واضحة يقلل ارتباك الزائر بشكل كبير. في بعض المشاريع البسيطة كنت أضع زر نسخ أو إرسال بدون أي رسالة، وكان المستخدم لا يعرف هل تم تنفيذ الأمر أم لا.
بعد إضافة Flash Message أصبح التفاعل أوضح بكثير. لذلك أعتبر هذا الكود من الأكواد الصغيرة التي تستحق أن تكون داخل أي مشروع واجهة أمامية.
📖 إيش فائدة هذا الكود؟
رسائل فلاش Flash Messages هي إشعارات منبثقة تظهر للمستخدم بعد تنفيذ إجراء معين داخل الموقع.
✅ رسالة نجاح: تظهر بعد حفظ البيانات أو إتمام عملية بنجاح
❌ رسالة خطأ: تظهر عند فشل عملية أو وجود مشكلة
⚠️ رسالة تحذير: تظهر لتنبيه المستخدم قبل تنفيذ إجراء مهم
ℹ️ رسالة معلومات: تظهر لإعلام المستخدم بتحديث أو معلومة جديدة
⚡ طريقة الاستخدام:
showFlash('success') → رسالة نجاح
showFlash('error') → رسالة خطأ
showFlash('warning') → رسالة تحذير
showFlash('info') → رسالة معلومات
06 كيفية دمج الكود في موقعك خطوة بخطوة
دمج كود Flash Messages في موقعك عملية بسيطة جدًا ولا تحتاج خبرة برمجية متقدمة. اتبع الخطوات التالية:
- الخطوة الأولى: انسخ الكود الكامل من الأسفل واحفظه في ملف باسم
flash.html - الخطوة الثانية: افتح الملف في أي محرر نصوص مثل Notepad أو VS Code
- الخطوة الثالثة: عدّل النصوص والألوان حسب هوية موقعك من داخل الكود
- الخطوة الرابعة: ارفع الملف إلى استضافة موقعك أو ضعه داخل مشاركة بلوجر في وضع HTML
- الخطوة الخامسة: اختبر ظهور الرسائل بالضغط على كل زر للتأكد من عمله بشكل صحيح
جرب الرسائل الآن
اضغط على الأزرار التالية لتجربة الرسائل التنبيهية:
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flash Messages - Waad alsheme</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--success: #00B894;
--error: #E17055;
--warning: #FDCB6E;
--info: #0984E3;
--dark: #2D3436;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
padding: 40px 20px;
background: transparent !important;
}
.container { max-width: 800px; margin: 0 auto; }
.flash-container {
position: fixed; top: 20px; left: 20px; z-index: 1000;
display: flex; flex-direction: column; gap: 15px; max-width: 400px;
}
.flash-message {
padding: 20px 25px; border: 4px solid var(--dark);
display: flex; align-items: center; gap: 15px;
position: relative; overflow: hidden;
animation: slideIn 0.5s ease, pulse 2s infinite;
box-shadow: 8px 8px 0 var(--dark); transform: translate(-3px, -3px);
}
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translate(-3px, -3px); opacity: 1; }
}
@keyframes pulse {
0%, 100% { box-shadow: 8px 8px 0 var(--dark); }
50% { box-shadow: 12px 12px 0 var(--dark); }
}
.flash-success { background: var(--success); color: white; }
.flash-error { background: var(--error); color: white; }
.flash-warning { background: var(--warning); color: var(--dark); }
.flash-info { background: var(--info); color: white; }
.flash-icon {
width: 50px; height: 50px; background: white;
border: 3px solid var(--dark); display: flex;
align-items: center; justify-content: center;
font-size: 1.5rem; flex-shrink: 0;
}
.flash-success .flash-icon { color: var(--success); }
.flash-error .flash-icon { color: var(--error); }
.flash-warning .flash-icon { color: var(--warning); }
.flash-info .flash-icon { color: var(--info); }
.flash-content { flex: 1; }
.flash-title {
font-weight: 800; font-size: 1.1rem; margin-bottom: 5px;
text-transform: uppercase; letter-spacing: 1px;
}
.flash-text { font-size: 0.95rem; font-weight: 600; }
.flash-close {
width: 35px; height: 35px; background: var(--dark);
color: white; border: none; font-size: 1.2rem;
cursor: pointer; display: flex; align-items: center;
justify-content: center; transition: all 0.2s ease;
}
.flash-close:hover { transform: scale(1.1) rotate(90deg); }
.flash-progress {
position: absolute; bottom: 0; left: 0; height: 6px;
background: rgba(0,0,0,0.3); animation: progress 5s linear forwards;
}
@keyframes progress { from { width: 100%; } to { width: 0%; } }
.flash-message::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px);
animation: moveStripes 20s linear infinite; pointer-events: none;
}
@keyframes moveStripes { 0% { transform: translateX(0); } 100% { transform: translateX(28px); } }
.demo-section { padding: 0; border: none; box-shadow: none; background: transparent !important; }
.demo-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 30px; color: var(--dark); }
.demo-buttons { display: flex; flex-wrap: wrap; gap: 15px; }
.demo-btn {
padding: 15px 30px; font-size: 1rem; font-weight: 700;
border: 4px solid var(--dark); cursor: pointer;
transition: all 0.2s ease; text-transform: uppercase; letter-spacing: 1px;
}
.demo-btn:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--dark); }
.btn-success { background: var(--success); color: white; }
.btn-error { background: var(--error); color: white; }
.btn-warning { background: var(--warning); color: var(--dark); }
.btn-info { background: var(--info); color: white; }
.flash-message.hiding { animation: slideOut 0.5s ease forwards; }
@keyframes slideOut { to { transform: translateX(-150%); opacity: 0; } }
</style>
</head>
<body>
<div class="container">
<div class="demo-section">
<h2 class="demo-title">اختبر الرسائل:</h2>
<div class="demo-buttons">
<button class="demo-btn btn-success" onclick="showFlash('success')">نجاح ✓</button>
<button class="demo-btn btn-error" onclick="showFlash('error')">خطأ ✕</button>
<button class="demo-btn btn-warning" onclick="showFlash('warning')">تحذير !</button>
<button class="demo-btn btn-info" onclick="showFlash('info')">معلومة ℹ</button>
</div>
</div>
</div>
<div class="flash-container" id="flashContainer"></div>
<script>
const messages = {
success: { icon: '✓', title: 'تم بنجاح!', text: 'تم حفظ التغييرات بنجاح', class: 'flash-success' },
error: { icon: '✕', title: 'خطأ!', text: 'حدث خطأ أثناء الحفظ', class: 'flash-error' },
warning: { icon: '!', title: 'تنبيه!', text: 'يرجى مراجعة البيانات', class: 'flash-warning' },
info: { icon: 'ℹ', title: 'معلومة', text: 'هناك تحديث جديد متوفر', class: 'flash-info' }
};
function showFlash(type) {
const container = document.getElementById('flashContainer');
const msg = messages[type];
const flash = document.createElement('div');
flash.className = 'flash-message ' + msg.class;
flash.innerHTML = '<div class="flash-icon">' + msg.icon + '</div><div class="flash-content"><div class="flash-title">' + msg.title + '</div><div class="flash-text">' + msg.text + '</div></div><button class="flash-close" onclick="closeFlash(this)">×</button><div class="flash-progress"></div>';
container.appendChild(flash);
setTimeout(() => { closeFlash(flash.querySelector('.flash-close')); }, 5000);
}
function closeFlash(btn) {
const flash = btn.closest('.flash-message');
flash.classList.add('hiding');
setTimeout(() => { flash.remove(); }, 500);
}
window.onload = () => { setTimeout(() => showFlash('info'), 500); };
</script>
</body>
</html>أسئلة شائعة
const messages وعدل العنوان والنص لكل رسالة.4000 داخل setTimeout، وهو يعني 4 ثوانٍ.
.jpeg)
التعليقات
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.