كود رسائل تنبيهية Flash Messages بتصميم احترافي HTML CSS JavaScript

في هذا المقال أشارككم كود رسائل تنبيهية أو ما يعرف باسم Flash Messages، وهو من الأكواد الصغيرة التي أحب استخدامها كثيرًا داخل المواقع لأنها تعطي المستخدم إحساسًا أن الموقع تفاعلي ومنظم. أحيانًا يكون الفرق بين موقع عادي وموقع مريح هو رسالة صغيرة تظهر بعد الضغط على زر، مثل رسالة نجاح عند حفظ البيانات أو رسالة خطأ عند وجود مشكلة.

أكثر شيء يعجبني في هذا النوع من الأكواد أنه بسيط، لكنه يعطي لمسة احترافية واضحة. بدل أن يضغط الزائر على زر ولا يعرف هل حدث شيء أم لا، تظهر له رسالة مباشرة تخبره بما حصل. هذه التفاصيل الصغيرة ترفع تجربة المستخدم، وتناسب مواقع بلوجر، صفحات الهبوط، لوحات التحكم، المتاجر الإلكترونية، نماذج التواصل، وحتى المشاريع التعليمية.

ما هي رسائل Flash Messages؟

رسائل Flash Messages هي إشعارات قصيرة تظهر في واجهة الموقع بعد تنفيذ إجراء معين. مثلًا عندما يرسل المستخدم نموذج تواصل، يمكن أن تظهر رسالة تقول: تم الإرسال بنجاح. وإذا حدث خطأ، تظهر رسالة أخرى توضح أن هناك مشكلة. الفكرة ليست مجرد شكل جمالي، بل وسيلة مهمة لتوجيه المستخدم ومنع الحيرة أثناء استخدام الموقع.

متى تحتاج إلى هذا الكود؟

عند إنشاء نموذج تسجيل أو تسجيل دخول.
عند إضافة زر نسخ كود أو رابط.
عند بناء لوحة تحكم بسيطة.
عند تصميم متجر إلكتروني أو صفحة طلب.
عند عرض تنبيهات نجاح أو خطأ أو تحذير داخل الموقع.

لماذا هذا الكود مناسب للمبتدئين؟

الكود لا يحتاج إلى مكتبات خارجية مثل jQuery أو Bootstrap، فهو مبني فقط باستخدام HTML وCSS وJavaScript. وهذا ما يجعله خفيفًا وسهل التعديل. يمكنك تغيير الألوان، النصوص، مدة ظهور الرسالة، مكان ظهورها، وحجمها بسهولة من داخل الكود نفسه.

مميزات كود الرسائل التنبيهية

تصميم حديث بألوان واضحة.
يدعم أربع حالات: نجاح، خطأ، تحذير، معلومات.
يظهر ويختفي بحركة ناعمة.
يمكن إغلاق الرسالة يدويًا.
مناسب لمواقع بلوجر والمواقع العادية.
سهل التعديل ولا يحتاج خبرة كبيرة.

تجربتي مع هذا النوع من الأكواد

من تجربتي، وجود رسالة تنبيه واضحة يقلل ارتباك الزائر. في بعض المشاريع البسيطة كنت أضع زر نسخ أو إرسال بدون أي رسالة، وكان المستخدم لا يعرف هل تم تنفيذ الأمر أم لا. بعد إضافة Flash Message أصبح التفاعل أوضح بكثير. لذلك أعتبر هذا الكود من الأكواد الصغيرة التي تستحق أن تكون داخل أي مشروع واجهة أمامية.

أسئلة شائعة

هل الكود يعمل على بلوجر؟
نعم، يمكن وضعه داخل مشاركة بلوجر في وضع HTML أو داخل صفحة مخصصة.

هل يمكن تغيير النصوص؟
نعم، ابحث عن const messages وعدل العنوان والنص لكل رسالة.

هل يمكن تغيير مدة ظهور الرسالة؟
نعم، غير رقم 4000 داخل setTimeout، وهو يعني 4 ثوانٍ.

📖 إيش فائدة هذا الكود؟

رسائل فلاش Flash Messages هي إشعارات منبثقة تظهر للمستخدم بعد تنفيذ إجراء معين داخل الموقع.

✅ رسالة نجاح: تظهر بعد حفظ البيانات أو إتمام عملية بنجاح.
❌ رسالة خطأ: تظهر عند فشل عملية أو وجود مشكلة.
⚠️ رسالة تحذير: تظهر لتنبيه المستخدم قبل تنفيذ إجراء مهم.
ℹ️ رسالة معلومات: تظهر لإعلام المستخدم بتحديث أو معلومة جديدة.

⚡ طريقة الاستخدام:
showFlash('success') → رسالة نجاح
showFlash('error') → رسالة خطأ
showFlash('warning') → رسالة تحذير
showFlash('info') → رسالة معلومات

📋 كود HTML + CSS + JavaScript جاهز للنسخ

<!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 | رسائل تنبيهية</title>
<style>
body {
    background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
    font-family: Tahoma, Arial, sans-serif;
    min-height: 100vh;
    padding: 40px;
}
.flash-container {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
}
.flash-message {
    padding: 15px 20px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.4s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.flash-message.hiding {
    animation: slideOut 0.4s ease forwards;
}
@keyframes slideOut {
    to { transform: translateX(100%); opacity: 0; }
}
.flash-success { background: #00B894; color: white; }
.flash-error { background: #E17055; color: white; }
.flash-warning { background: #FDCB6E; color: #2D3436; }
.flash-info { background: #0984E3; color: white; }
.flash-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.flash-content { flex: 1; }
.flash-title { font-weight: bold; margin-bottom: 3px; }
.flash-text { font-size: 0.85rem; }
.flash-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.demo-btn {
    padding: 12px 25px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
}
</style>
</head>
<body>

<button class="demo-btn" onclick="showFlash('success')">✅ نجاح</button>
<button class="demo-btn" onclick="showFlash('error')">❌ خطأ</button>
<button class="demo-btn" onclick="showFlash('warning')">⚠️ تحذير</button>
<button class="demo-btn" onclick="showFlash('info')">ℹ️ معلومات</button>

<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>
    `;
    container.appendChild(flash);
    setTimeout(function() {
        closeFlash(flash.querySelector('.flash-close'));
    }, 4000);
}

function closeFlash(btn) {
    const flash = btn.closest('.flash-message');
    flash.classList.add('hiding');
    setTimeout(function() {
        flash.remove();
    }, 400);
}
</script>

</body>
</html>