يمكنك إنشاء alert بالتنسيق الذي ترغب به باستخدام HTML, jQuery, Bootstrap
أولاً: قم بكتابة الشيفرة الخاصة بال alert، حدد Id معين، مثلاً success-alert، في البداية تكون غير ظاهرة عن طريق إضافة التنسيق: style="display:none;" كما هو وضح في الشيفرة التالية
<div class="alert alert-success" id="success-alert" style="display:none;">
<i class="bx bx-check-double font-size-16 align-middle mr-1"></i>
<span>محتوى الرسالة</span>
</div>
ثانياً: قم بكتابة الزر الذي يقوم بدوره باستدعاء التابع showAlert
<button onclick="showAlert()">أظهر الإخطار</button>
ثالثاً: قم بكتابة التابع showAlert الذي يعمل كالتالي:
يستدعي التابع fadeIn وهو تابع جاهز في مكتبة jQuery يقوم بإظهار العناصر المخفية تدريجياً، وتستطيع تمرير قيمة زمنية بال ميلي ثانية لتحدد الوقت اللازم لإظهار العناصر.
setTimeout الذي يستدعي تابع معين بعد فترة زمنية معينة، وفي حالتنا سيستدعي fadeOut بعد 1500 ميلي ثانية
fadeOut يعمل عكس fadeIn أي يعمل على إخفاء العناصر الظاهرة تدريجياً
وبالتالي عند النقر على الزر سيظهر ال alert تدريجياً خلال 500 ميلي ثانية، وبعد 1500 ميلي ثانية سيختفي تدريجياً خلال 2000 ميلي ثانية
function showAlert(){
$("#success-alert").fadeIn(500);
setTimeout(
function() {
$("#success-alert").fadeOut(2000);
},
1500
);
}