أحدث البرامج التعليمية وتطوير الشبكة
 

Bootstrap شبيبة مشروط

❮ السابق التالي المرجعي ❯

شبيبة مشروط (modal.js)

البرنامج المساعد مشروط هو إطار مربع / المنبثقة الحوار الذي يتم عرضه على رأس الصفحة الحالية.

لتعليمي حول شرطية، اقرأ Bootstrap مشروط التعليمي .

فئات مشروط المساعد

صف مدرسي وصف
.modal يخلق مشروط
.modal-content أساليب مشروط بشكل صحيح مع الحدود، لون الخلفية، الخ استخدام هذه الفئة لإضافة مشروط في الرأس، الجسم، وتذييل الصفحة.
.modal-header يحدد نمط للرأس مشروط
.modal-body يحدد نمط للجسم مشروط
.modal-footer يحدد اسلوب لتذييل في مشروط. ملاحظة: هذه المنطقة باتجاه اليمين بشكل افتراضي. لتغيير هذا، الكتابة CSS مع محاذاة النص: غادر | مركز
.modal-sm يحدد مشروط الصغيرة
.modal-lg يحدد مشروط كبير
.fade يضيف تأثير الرسوم المتحركة / التحول الذي يتلاشى مشروط الدخول والخروج

تحريك مشروط عن طريق data-* سمات

إضافة data-toggle="modal" و data-target="#modalID" إلى أي عنصر.

ملاحظة: للحصول على <a> عناصر، حذف data-target ، واستخدام href="#modalID" بدلا من ذلك:

مثال

<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Links -->
<a data-toggle="modal" href="#myModal">Open Modal</a>

<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open Modal</p>
انها محاولة لنفسك »

الزناد عن طريق جافا سكريبت

تمكين يدويا مع:

مثال

$("#myModal").modal()
انها محاولة لنفسك »

خيارات مشروط

يمكن أن تنتقل عن طريق الخيارات سمات البيانات أو جافا سكريبت. لسمات البيانات، إلحاق اسم الخيار لبالبيانات، كما في data-backdrop="" .

اسم اكتب افتراضي وصف جربها
backdropboolean or the string "static"true تحديد ما إذا كان يجب أن يكون مشروط تراكب الظلام:

  • true - تراكب الظلام
  • false - أي تراكب (شفافة)

إذا قمت بتحديد قيمة "static" ، أنه من غير الممكن لإغلاق مشروط عند النقر خارجه

باستخدام شبيبة باستخدام البيانات
keyboardbooleantrue تحديد ما إذا كان مشروط يمكن أن تكون مغلقة مع مفتاح الهروب (Esc) :

  • true - مشروط يمكن أن تكون مغلقة مع Esc
  • false - مشروط لا يمكن أن تكون مغلقة مع Esc
باستخدام شبيبة باستخدام البيانات
showbooleantrue تحدد ما إذا كان لإظهار مشروط عند تهيئة باستخدام شبيبة باستخدام البيانات

طرق مشروط

يسرد الجدول التالي أساليب مشروط كل ما هو متاح.

طريقة وصف جربها
.modal( options ) ينشط المحتوى كما مشروط. رؤية الخيارات المذكورة أعلاه لقيم صالحة جربها
.modal("toggle") تبديل مشروط جربها
.modal("show") يفتح مشروط جربها
.modal("hide") يخفي مشروط جربها

مشروط الأحداث

يسرد الجدول التالي الأحداث مشروط كل ما هو متاح.

حدث وصف جربها
show.bs.modal يحدث عندما مشروط على وشك أن تظهر جربها
shown.bs.modal يحدث عندما يتم عرض مشروط بالكامل (بعد الانتهاء التحولات CSS) جربها
hide.bs.modal يحدث عندما مشروط على وشك أن تكون مخفية جربها
hidden.bs.modal يحدث عندما يتم إخفاء مشروط بالكامل (بعد الانتهاء التحولات CSS) جربها
أمثلة

أمثلة

تسجيل الدخول مشروط

المثال التالي بإنشاء مشروط لتسجيل الدخول:

مثال

<div class="container">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default btn-lg" id="myBtn">Login</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span> Login</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Username</label>
              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="form-group">
              <label for="psw"><span class="glyphicon glyphicon-eye-open"></span> Password</label>
              <input type="text" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="checkbox">
              <label><input type="checkbox" value="" checked>Remember me</label>
            </div>
            <button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon glyphicon-off"></span> Login</button>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-default btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
          <p>Not a member? <a href="#">Sign Up</a></p>
          <p>Forgot <a href="#">Password?</a></p>
        </div>
      </div>
    </div>
  </div>
</div>
انها محاولة لنفسك »

❮ السابق التالي المرجعي ❯