في هذا الدرس ، سوف نتعرف بشكل أساسي على المكون الإضافي في مربع Modal Box في Bootstrap ، وهو مكون منافسة منبثقة شائعة جدًا لمواقع الويب التفاعلية.
لمزيد من المعلومات حول مكون الإضافات الخاصة بـ Bootstrap Modal ، يرجى النقر على الموضوع الخاص "Bootstrap Modal Usage Tutorial" للتعلم. أتمنى أن تنال إعجابك ، لذا تابع أدناه
واحد. الاستخدام الأساسي
تتطلب المكونات المنبثقة التي تستخدم مربعات مشروط ثلاث طبقات من عناصر حاوية Div ، وهي Modal (طبقة الإعلان المشروط) ،
مربع الحوار (طبقة إعلان النافذة) ، المحتوى (طبقة المحتوى). في طبقة المحتوى ، هناك ثلاث طبقات ، وهي الرأس والجسم والتذييل.
// مثال أساسي
<!-إعلان مشروط ، يشير العرض إلى العرض-> <div tabindex = "-1"> <!-إعلان النافذة-> <div> <!-إعلان المحتوى-> <div> <!-header-> <viv> <button type = "button" divisiss = "modal"> <span> </span> لا يمكن للعضو تسجيل الدخول إلى العضو مؤقتًا </p> </viv> <!-الحاشية-> <div> <button type = "button"> سجل </button> <button type = "button"> تسجيل الدخول </button> </viv> </viv> </viv> </viv>
إذا كنت تريد أن يتم إخفاء المربع المشروط تلقائيًا ثم يطفو على السطح بالنقر فوق الزر ، فأنت بحاجة إلى القيام بالعمليات التالية.
// قم بإزالة العرض في المربع الوسيط وأضف معرفًا <div id = "mymodal"> // انقر لتشغيل المربع الوسيط لعرض <button data-toggle = "modal" data-arget = "#mymodal تعيين <div id = "mymodal"> // استخدم السائل في نظام الشبكة في الجزء الرئيسي من الجسم <!-الجسم الرئيسي-> <viv> <viv> <viv> <viv> 1 </viv> <viv> 1 </viv> <viv> 1 <///div>
اثنين. تعليمات الاستخدام
بعد إدخال الاستخدام الأساسي ، دعونا نلقي نظرة على الاستخدامات المهمة المختلفة للمكون الإضافي. تعتمد جميع المكونات الإضافية على JavaScript/jQuery. ثم ، هناك أربعة عناصر: الاستخدام والمعلمات والأساليب والأحداث.
1. الاستخدام
النوع الأول: يمكن تمريره من خلال سمة البيانات
// data-toggledata-toggle = "Modal" Target = "#mymodal"
تشير بيانات البيانات إلى نوع الزناد
تشير مستهدف البيانات إلى العقدة المشغلة
إذا كنت لا تستخدم <NUNTY> ، ولكن <a> ، حيث يمكن للاستهدف البيانات أيضًا استخدام HREF = "#mymodal"
يستبدل. بالطبع ، نوصي باستخدام مستهدف البيانات. بالإضافة إلى السمة المعلنة ، وبيانات البيانات واستهداف البيانات ، هناك بعض الخيارات المتاحة.
2. المعلمات
يمكن التحكم في التأثيرات عن طريق تعيين إعلان سمة البيانات-* على عنصر HTML.
// خلفية بيضاء وانقر فوق عدم إغلاق البيانات backdrop = "false" // اضغط على ESC لإغلاق لوحة البيانات = "false" // تهيئة مخفية. إذا تم تشغيل نقرة الزر ، فلن يتم عرض النقر الأول ، وفي المرة الثانية التي يتم عرضها. data-show = "false" // load index.html مرة واحدة في الحاوية href = "index.html"
بالطبع ، يمكن أيضًا تعيينه مباشرة في JavaScript.
// DECLARE $ ('#mymodal') من خلال jQuery.modal ({show: true ، backdrop: false ، لوحة المفاتيح: false ، عن بعد: 'index.html' ،}) ؛3. الطريقة
إذا لم يتم عرض النوافذ المنبثقة افتراضيًا ، فكيف يمكنني النقر فوق النوافذ المنبثقة قبل وبعد؟
// انقر لعرض نافذة منبثقة $ ('#btn'). على ('click' ، function () {$ ('#mymodal'). modal ('show') ؛}) ؛4. الأحداث
يدعم المربع المشروط 4 أنواع من الوقت ، المقابل قبل المنبثقة ، وبعد المنبثقة ، قبل الإغلاق وبعد الإغلاق.
$ ('#mymodal'). on ('show.bs.modal' ، function () {Alert ('free furn at the the method the show!') ؛}) ؛ $ ('#mymodal'). on ('shown.bs.modal' ، function () {enlert ('free when the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal in the modal. معروض! ') ؛}) ؛ $ ('#mymodal '). on (' Hide.bs.modal '، function () {Alert (' free furn at the the method the the method! ') ؛}) ؛ $ ('#mymodal '). على (' hiden.bs.modal '، function () معروضة!تم تجميع هذه السلسلة من البرامج التعليمية في: Bootstrap Basic Prosorials Secorts ، مرحبًا بك في النقر للتعلم.
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.