Bootstrap Modal Plugin
البرنامج المساعد مشروط
المكوِّن الإضافي Modal عبارة عن مربع حوار / نافذة منبثقة يتم عرضها أعلى الصفحة الحالية:
نصيحة: يمكن تضمين الإضافات بشكل فردي (باستخدام ملف "modal.js" الفردي الخاص بـ Bootstrap) ، أو كلها مرة واحدة (باستخدام "bootstrap.js" أو "bootstrap.min.js").
كيفية إنشاء مشروط
يوضح المثال التالي كيفية إنشاء نموذج أساسي:
مثال
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
شرح المثال
جزء "الزناد":
لتشغيل النافذة المشروطة ، تحتاج إلى استخدام زر أو ارتباط.
ثم قم بتضمين سمتَي البيانات * *:
data-toggle="modal"يفتح نافذة مشروطةdata-target="#myModal"يشير إلى معرف مشروط
الجزء "مشروط":
يجب أن يكون لدى أصل <div>الشرطي معرف مطابق لقيمة سمة هدف البيانات المستخدمة لتشغيل النموذج ("myModal").
يحدد .modalالفصل محتوى <div>باعتباره وسيطًا ويجلب التركيز عليه.
يضيف الفصل .fadeتأثيرًا انتقاليًا يتلاشى داخل وخارج النموذج. قم بإزالة هذه الفئة إذا كنت لا تريد هذا التأثير.
تعمل السمة role="dialog"على تحسين إمكانية الوصول للأشخاص الذين يستخدمون برامج قراءة الشاشة.
يحدد .modal-dialogالفصل العرض والهامش المناسبين للشروط.
جزء "المحتوى المشروط":
<div>باستخدام " class="modal-contentالأنماط المشروطة (الحدود ، لون الخلفية ، إلخ). بداخلها <div>، أضف رأس وجسم وتذييل الشرط.
يتم .modal-headerاستخدام الفئة لتحديد نمط رأس الشرط. يحتوي <button>الجزء الداخلي من الرأس على data-dismiss="modal"سمة تغلق الشرطي إذا قمت بالنقر فوقه. يقوم .closeالفصل بتصميم زر الإغلاق ، ويقوم .modal-titleالفصل بتصميم الرأس باستخدام ارتفاع خط مناسب.
يتم .modal-bodyاستخدام الفئة لتحديد نمط جسم النموذج. أضف أي ترميز HTML هنا ؛ الفقرات والصور ومقاطع الفيديو وما إلى ذلك.
يتم .modal-footerاستخدام الفئة لتحديد نمط تذييل النموذج. لاحظ أن هذه المنطقة محاذاة إلى اليمين افتراضيًا.
حجم مشروط
قم بتغيير حجم النموذج عن طريق إضافة .modal-sm
فئة الوسائط الصغيرة أو .modal-lgفئة الوسائط الكبيرة.
أضف فئة الحجم إلى <div>العنصر الذي يحتوي على فئة .modal-dialog:
مشروط صغير
<div class="modal-dialog modal-sm">
مشروط كبيرة
<div class="modal-dialog modal-lg">
بشكل افتراضي ، تكون الوسائط متوسطة الحجم.
إكمال مرجع مشروط Bootstrap
للحصول على مرجع كامل لجميع الخيارات والوسائل والأحداث المشروطة ، انتقل إلى مرجع مشروط Bootstrap JS الخاص بنا .