النوافذ المنبثقة (Modals)

<!-- زر تفعيل النافذة المنبثقة --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#basicModal"> فتح النافذة المنبثقة </button> <!-- النافذة المنبثقة --> <div class="modal fade" id="basicModal" tabindex="-1" aria-labelledby="basicModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="basicModalLabel">عنوان النافذة</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button> </div> <div class="modal-body"> <p>هذا هو محتوى جسم النافذة المنبثقة. يمكنك وضع أي محتوى هنا!</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> <button type="button" class="btn btn-primary">حفظ التغييرات</button> </div> </div> </div> </div>

<!-- نافذة صغيرة --> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- المحتوى --> </div> </div> <!-- نافذة افتراضية/متوسطة (لا حاجة لفئة) --> <div class="modal-dialog"> <div class="modal-content"> <!-- المحتوى --> </div> </div> <!-- نافذة كبيرة --> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- المحتوى --> </div> </div> <!-- نافذة كبيرة جدًا --> <div class="modal-dialog modal-xl"> <div class="modal-content"> <!-- المحتوى --> </div> </div>

<!-- ملء الشاشة دائمًا --> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">نافذة ملء الشاشة</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>هذه النافذة تشغل الشاشة بالكامل!</p> </div> </div> </div> <!-- ملء الشاشة أسفل نقطة توقف محددة --> <div class="modal-dialog modal-fullscreen-sm-down"><!-- ملء الشاشة على الشاشات الصغيرة --></div> <div class="modal-dialog modal-fullscreen-md-down"><!-- ملء الشاشة على المتوسطة وأقل --></div> <div class="modal-dialog modal-fullscreen-lg-down"><!-- ملء الشاشة على الكبيرة وأقل --></div> <div class="modal-dialog modal-fullscreen-xl-down"><!-- ملء الشاشة على XL وأقل --></div> <div class="modal-dialog modal-fullscreen-xxl-down"><!-- ملء الشاشة على XXL وأقل --></div>

<div class="modal fade" id="centeredModal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">في الوسط عموديًا</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>هذه النافذة في الوسط عموديًا في منطقة العرض.</p> </div> </div> </div> </div> <!-- في الوسط وقابلة للتمرير --> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"> <!-- المحتوى --> </div>

<div class="modal fade" id="scrollableModal" tabindex="-1"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">نافذة قابلة للتمرير</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>محتوى طويل هنا...</p> <p>سيتم تمرير هذا المحتوى داخل جسم النافذة.</p> <!-- المزيد من المحتوى --> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button> </div> </div> </div> </div>

<div class="modal fade" id="formModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">التسجيل</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <form> <div class="mb-3"> <label for="userName" class="form-label">الاسم</label> <input type="text" class="form-control" id="userName" required> </div> <div class="mb-3"> <label for="userEmail" class="form-label">البريد الإلكتروني</label> <input type="email" class="form-control" id="userEmail" required> </div> <div class="mb-3"> <label for="userPassword" class="form-label">كلمة المرور</label> <input type="password" class="form-control" id="userPassword" required> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="agreeTerms"> <label class="form-check-label" for="agreeTerms"> أوافق على الشروط والأحكام </label> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button> <button type="button" class="btn btn-primary">إنشاء حساب</button> </div> </div> </div> </div>

<!-- مفعلات متعددة --> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sharedModal"> فتح من الزر 1 </button> <a href="#" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#sharedModal"> فتح من الرابط </a> <button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#sharedModal"> فتح من الزر 2 </button> <!-- نافذة مشتركة --> <div class="modal fade" id="sharedModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">نافذة مشتركة</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>يمكن فتح هذه النافذة من مفعلات متعددة.</p> </div> </div> </div> </div>

<script> // الحصول على عنصر النافذة المنبثقة const myModalEl = document.getElementById('myModal'); // إنشاء نسخة من النافذة المنبثقة const modal = new bootstrap.Modal(myModalEl, { keyboard: false, // تعطيل الإغلاق بمفتاح ESC backdrop: 'static' // تعطيل الإغلاق بالنقر على الخلفية }); // إظهار النافذة modal.show(); // إخفاء النافذة modal.hide(); // التبديل modal.toggle(); // مستمعي الأحداث myModalEl.addEventListener('show.bs.modal', function (event) { console.log('النافذة على وشك الظهور'); }); myModalEl.addEventListener('shown.bs.modal', function (event) { console.log('النافذة ظهرت بالكامل'); }); myModalEl.addEventListener('hide.bs.modal', function (event) { console.log('النافذة على وشك الاختفاء'); }); myModalEl.addEventListener('hidden.bs.modal', function (event) { console.log('النافذة اختفت بالكامل'); }); </script>