مربع مشروط (وسيط) هو شكل طفل مغطى على النموذج الأصل. عادةً ما يكون الغرض هو عرض المحتوى من مصدر منفصل ، والذي يمكن أن يكون له بعض التفاعل دون ترك نموذج الأصل. يمكن للنموذج الفرعي توفير المعلومات ، والتفاعل ، إلخ.
إذا كنت ترغب في الرجوع إلى وظيفة المكون الإضافي بشكل منفصل ، فأنت بحاجة إلى الرجوع إلى modal.js. أو ، كما هو مذكور في الفصل الإضافي في Bootstrap ، يمكنك الرجوع إلى bootstrap.js أو إصدارات مضغوطة من bootstrap.min.js.
1. الاستخدام
يمكنك تبديل المحتويات المخفية للمكون الإضافي مربع Modal Box (Modal):
من خلال سمة البيانات: قم بتعيين السمة data-toggle = "Modal" على عنصر وحدة التحكم (مثل زر أو ارتباط) ، وقم بتعيين Target = "#Identifier" أو HREF = "#Identifier" لتحديد مربع مشروط محدد للتبديل (مع ID = "Identifier").
مع JavaScript: باستخدام هذه التقنية ، يمكنك استدعاء مربع مشروط مع ID = "Identifier" من خلال خط بسيط من JavaScript:
$ ('#Identifier'). Modal (خيارات)
2. مثال بسيط
div id = "mymodal"> <viv> <button type = "button" data-dismiss = "modal"> x </utton> <h3> عنوان DIAL TILP </h3> </viv> <viv> <p> جسم مربع الاتصال </p> </fiv> <viv> <a href = "#" data-dismiss = "modal" Data-Dismiss = "Modal"> تأكيد </a> </div> </viv>
يمكن استدعاء مربع الحوار الوسيط مباشرة باستخدام زر أو رابط ، وهذا هو الاستخدام البسيط:
انسخ الرمز كما يلي: <a href = "#modal1" rob = "button" data-toggle = "modal"> add </a>
بالإضافة إلى ذلك ، عندما تحتاج إلى جعل مربع الحوار مسح بيانات النموذج في كل مرة يتم فتحها ، على النحو التالي:
نسخة الكود كما يلي: $ ('#modal1'). modal ('Hide') ؛
$ ("#modal1"). on ("hidden" ، function () {$ ('#form1') [0] .reset () ؛}) ؛ // بعد إضافة العقد ، امسح عملية النموذج
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.