استخدم المكوِّن الإضافي المشروط لجافا سكريبت في Bootstrap لإضافة مربعات حوار إلى موقعك من أجل الصناديق المبسطة أو إشعارات المستخدم أو المحتوى المخصص بالكامل.
كيف تعمل
قبل البدء في المكون النموذجي لـ Bootstrap ، تأكد من قراءة ما يلي حيث تغيرت خيارات القائمة الخاصة بنا مؤخرًا.
يتم إنشاء النماذج باستخدام HTML و CSS و JavaScript. يتم وضعهم فوق كل شيء آخر في المستند وإزالة التمرير من <body>بحيث يتم تمرير المحتوى الشرطي بدلاً من ذلك.
سيؤدي النقر فوق "الخلفية" المشروطة إلى إغلاق النموذج تلقائيًا.
لا يدعم Bootstrap سوى نافذة مشروطة واحدة في كل مرة. لا يتم دعم النماذج المتداخلة لأننا نعتقد أنها تجارب مستخدم سيئة.
تستخدم الوسائط position: fixed، والتي يمكن أن تكون في بعض الأحيان خاصة بعض الشيء حول عرضها. كلما كان ذلك ممكنًا ، ضع HTML الشرطي في موضع المستوى الأعلى لتجنب التداخل المحتمل من العناصر الأخرى. من المحتمل أن تواجه مشكلات عند تضمين عنصر .modalداخل عنصر ثابت آخر.
مرة أخرى ، نظرًا position: fixedلوجود بعض المحاذير المتعلقة باستخدام الوسائط على الأجهزة المحمولة. راجع مستندات دعم المتصفح للحصول على التفاصيل.
نظرًا للكيفية التي تحدد بها HTML5 دلالاتها ، فإن autofocusسمة HTML ليس لها أي تأثير في أشكال Bootstrap. لتحقيق نفس التأثير ، استخدم بعض JavaScript المخصص:
استمر في القراءة للحصول على عروض توضيحية وإرشادات الاستخدام.
أمثلة
مكونات مشروطة
يوجد أدناه مثال مشروط ثابتposition ( بمعنى displayأنه تم تجاوزه). يتم تضمين الرأس الشرطي والجسم الشرطي (مطلوب لـ padding) والتذييل الشرطي (اختياري). نطلب منك تضمين رؤوس مشروطة مع إجراءات الرفض كلما أمكن ذلك ، أو تقديم إجراء رفض صريح آخر.
عنوان مشروط
يتم وضع النص الأساسي المشروط هنا.
عرض حي
قم بتبديل عرض توضيحي مشروط يعمل عن طريق النقر فوق الزر أدناه. سوف ينزلق لأسفل ويتلاشى للداخل من أعلى الصفحة.
Modal title
Woohoo, you're reading this text in a modal!
خلفية ثابتة
عند ضبط الخلفية على ثابت ، لن يتم إغلاق النموذج عند النقر خارجها. انقر فوق الزر أدناه لتجربته.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
تمرير محتوى طويل
عندما تصبح النماذج طويلة جدًا بالنسبة لإطار عرض المستخدم أو الجهاز ، يتم التمرير بشكل مستقل عن الصفحة نفسها. جرب العرض أدناه لترى ما نعنيه.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
يمكنك أيضًا إنشاء نموذج قابل للتمرير يسمح بتمرير الجسم الشرطي عن طريق الإضافة .modal-dialog-scrollableإلى .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
استخدم نظام شبكة Bootstrap داخل نموذج عن طريق التداخل .container-fluidداخل ملف .modal-body. بعد ذلك ، استخدم فئات نظام الشبكة العادية كما تفعل في أي مكان آخر.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
محتوى مشروط متنوع
هل لديك مجموعة من الأزرار التي تؤدي جميعها إلى نفس النموذج بمحتويات مختلفة قليلاً؟ استخدم سمات HTMLevent.relatedTarget و HTML (ربما عبر jQuery ) لتغيير محتويات النموذج بناءً على الزر الذي تم النقر عليه.data-*
يوجد أدناه عرض توضيحي مباشر متبوعًا بمثال HTML و JavaScript. لمزيد من المعلومات ، اقرأ مستندات الأحداث المشروطة للحصول على تفاصيل حول relatedTarget.
New message
تغيير الرسوم المتحركة
يحدد $modal-fade-transformالمتغير حالة التحويل .modal-dialogقبل الرسوم المتحركة الخفوتية المشروطة ، $modal-show-transformويحدد المتغير التحويل .modal-dialogفي نهاية الرسوم المتحركة الخفوتية المشروطة.
إذا كنت تريد على سبيل المثال تكبير الرسوم المتحركة ، يمكنك تعيين $modal-fade-transform: scale(.8).
إزالة الرسوم المتحركة
بالنسبة للشروط التي تظهر ببساطة بدلاً من أن تتلاشى للعرض ، قم بإزالة .fadeالفئة من ترميزك الشرطي.
ارتفاعات ديناميكية
إذا تغير ارتفاع أحد الوسائط أثناء فتحه ، فيجب عليك الاتصال $('#myModal').modal('handleUpdate')لإعادة ضبط موضع الشرط في حالة ظهور شريط التمرير.
إمكانية الوصول
تأكد من إضافة aria-labelledby="..."، مع الإشارة إلى العنوان الشرطي ، إلى .modal. بالإضافة إلى ذلك ، يمكنك تقديم وصف لمربع الحوار الخاص بك aria-describedbyباستخدام .modal. لاحظ أنك لست بحاجة إلى الإضافة role="dialog"لأننا نضيفها بالفعل عبر JavaScript.
تضمين أشرطة فيديو يوتيوب
يتطلب تضمين مقاطع فيديو YouTube في النماذج وجود JavaScript إضافي غير موجود في Bootstrap لإيقاف التشغيل تلقائيًا والمزيد. راجع منشور Stack Overflow المفيد هذا للحصول على مزيد من المعلومات.
أحجام اختيارية
تحتوي النماذج على ثلاثة أحجام اختيارية ، وهي متاحة عبر فئات المُعدِّل ليتم وضعها على ملف .modal-dialog. تبدأ هذه الأحجام عند نقاط توقف معينة لتجنب أشرطة التمرير الأفقية في إطارات العرض الأضيق.
بحجم
فصل
أقصى عرض مشروط
صغير
.modal-sm
300px
تقصير
لا أحد
500px
كبير
.modal-lg
800px
كبير جدا
.modal-xl
1140px
يشكّل النموذج الافتراضي الخاص بنا بدون فئة معدِّل الحجم "المتوسط".
Extra large modal
...
Large modal
...
Small modal
...
إستعمال
يقوم المكون الإضافي المشروط بتبديل المحتوى المخفي عند الطلب ، عبر سمات البيانات أو JavaScript. كما أنه يضيف .modal-openإلى <body>تجاوز سلوك التمرير الافتراضي وينشئ .modal-backdropمنطقة نقرة لرفض النماذج المعروضة عند النقر خارج النموذج.
عبر سمات البيانات
تنشيط مشروط دون كتابة JavaScript. قم بتعيين data-toggle="modal"عنصر تحكم ، مثل زر ، مع data-target="#foo"أو href="#foo"لاستهداف نمط محدد للتبديل.
عبر JavaScript
استدعاء مشروط مع معرف myModalبسطر واحد من JavaScript:
خيارات
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار بـ data-، كما في data-backdrop="".
اسم
يكتب
تقصير
وصف
خلفية
منطقي أو السلسلة'static'
حقيقي
يتضمن عنصر خلفية مشروط. بدلاً من ذلك ، حدد staticخلفية لا تغلق النموذج عند النقر.
لوحة المفاتيح
قيمة منطقية
حقيقي
يغلق المشروط عند الضغط على مفتاح الهروب
التركيز
قيمة منطقية
حقيقي
يضع التركيز على الوضع عند التهيئة.
تبين
قيمة منطقية
حقيقي
يظهر الشكل عند التهيئة.
طُرق
الطرق غير المتزامنة والانتقالات
جميع طرق API غير متزامنة وتبدأ في الانتقال . يعودون إلى المتصل بمجرد بدء الانتقال ولكن قبل أن ينتهي . بالإضافة إلى ذلك ، سيتم تجاهل استدعاء طريقة على مكون انتقالي .
ينشط المحتوى الخاص بك كمشروط. يقبل الخيارات الاختيارية object.
.modal('toggle')
يبدل مشروط يدويًا. يعود إلى المتصل قبل أن يتم إظهار أو إخفاء الوسائط (أي قبل وقوع الحدث shown.bs.modalأو ).hidden.bs.modal
.modal('show')
يفتح مشروط يدويا. يعود إلى المتصل قبل أن يظهر الشكل (أي قبل shown.bs.modalوقوع الحدث).
.modal('hide')
يدويا يخفي مشروط. يعود إلى المتصل قبل أن يتم إخفاء الوسيط (أي قبل hidden.bs.modalوقوع الحدث).
.modal('handleUpdate')
أعد ضبط موضع الوسائط يدويًا إذا تغير ارتفاع النموذج أثناء فتحه (أي في حالة ظهور شريط التمرير).
.modal('dispose')
يدمر شكل عنصر.
الأحداث
تكشف فئة مشروط Bootstrap عن بعض الأحداث للتثبيت في وظائف مشروطة. يتم إطلاق جميع الأحداث المشروطة على الوسائط نفسها (أي في <div class="modal">).
نوع الحدث
وصف
show.bs.modal
يتم تشغيل هذا الحدث فورًا عند showاستدعاء أسلوب المثيل. إذا كانت النتيجة نقرة ، فإن العنصر الذي تم النقر عليه يكون متاحًا relatedTargetكخاصية للحدث.
معروض .bs.modal
يتم تشغيل هذا الحدث عندما يكون النموذج مرئيًا للمستخدم (سينتظر حتى تكتمل انتقالات CSS). إذا كانت النتيجة نقرة ، فإن العنصر الذي تم النقر عليه يكون متاحًا relatedTargetكخاصية للحدث.
نموذج اخفاء
يتم تشغيل هذا الحدث فورًا عند hideاستدعاء أسلوب المثيل.
نموذج مخفي
يتم تشغيل هذا الحدث عند انتهاء إخفاء النموذج عن المستخدم (سينتظر حتى تكتمل انتقالات CSS).
إخفاءمنع. bs.modal
يتم تشغيل هذا الحدث عند عرض النموذج ، ويتم تشغيل الخلفية الخاصة به ويتم staticإجراء نقرة خارج النموذج أو الضغط على مفتاح الهروب باستخدام خيار لوحة المفاتيح أو data-keyboardالتعيين على false.