الفرق بين المراجعتين لصفحة: «Bootstrap/modal»

من موسوعة حسوب
مرئينص الويكي
أنشأ الصفحة ب'استخدم ملحَق JavaScript الخاصّ بالنوافذ الشرطيّة Modal لإضافة حوارات على شكل صناديق خفيفة إلى موقعك...'
 
لا ملخص تعديل
 
(9 مراجعات متوسطة بواسطة 3 مستخدمين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:النوافذ الشرطيّة Modals في إطار العمل Bootstrap}}</noinclude>
استخدم ملحَق JavaScript الخاصّ بالنوافذ الشرطيّة Modal لإضافة حوارات على شكل صناديق خفيفة إلى موقعك، أو إشعارات أو محتوى مُخصَّص بالكامل.
استخدم ملحَق JavaScript الخاصّ بالنوافذ الشرطيّة Modal لإضافة حوارات على شكل صناديق خفيفة إلى موقعك، أو إشعارات أو محتوى مُخصَّص بالكامل.
 
== آليّة العمل ==
 
## كيفيّة العمل  
 
تأكّد من قراءة الفقرات التاليّة قبل البدء في استخدام مكوِّن النوافذ الشرطيّة في إطار العمل Bootstrap، إذ أنّ خيّارات القوائم عُدِّلت في الإصدارات الأخيرة.
تأكّد من قراءة الفقرات التاليّة قبل البدء في استخدام مكوِّن النوافذ الشرطيّة في إطار العمل Bootstrap، إذ أنّ خيّارات القوائم عُدِّلت في الإصدارات الأخيرة.


* تُنشَأ النوافذ الشرطية باستخدام HTML، وCSS وJavaScript. تتموضع النوافذ الشرطيّة فوق مكوِّنات الصفحة جميعها وتحذف قابليّة التمرير من متن الصفحة (<code>&lt;body></code>) بحيث يُمرَّر محتوى النافذة الشرطيّة بدلًا من المتن.
* تُنشَأ النوافذ الشرطية باستخدام [[HTML]] و [[CSS]] و [[JavaScript]]. تتموضع النوافذ الشرطيّة فوق مكوِّنات الصفحة جميعها وتحذف قابليّة التمرير من متن الصفحة (<code>[[HTML/body|&lt;body>]]</code>) بحيث يُمرَّر محتوى النافذة الشرطيّة بدلًا من المتن.
* تُغلَق النافذة الشرطيّة فور النقر على زر التراجع.
* تُغلَق النافذة الشرطيّة فور النقر على زر التراجع.
* لا يدعم إطار العمل Bootstrap سوى نافذة شرطيّة واحدة في كلّ مرة؛ كما أنّه لا يدعم النوافذ الشرطيّة المتداخلة (نافذة شرطيّة داخل نافذة شرطيّة) ويعدّها تجربة مستخدم سيّئة.
* لا يدعم إطار العمل Bootstrap سوى نافذة شرطيّة واحدة في كلّ مرة؛ كما أنّه لا يدعم النوافذ الشرطيّة المتداخلة (نافذة شرطيّة داخل نافذة شرطيّة) ويعدّها تجربة مستخدم سيّئة.
* تستخدم النوافذ الشرطيّة الخاصيّة <code>position: fixed</code> التي قد تكون أحيانًا فريدة في طريقة عرضها. حاول قدر المستطاع وضع شفرة HTML الخاصّة بالنافذة الفرعيّة في مستوى علويّ لتفادي التداخل المُحتمل مع العناصر الأخرى. من المحتمل جدًّا أن يتسبّب وضع النافذة الشرطيّة (<code>‎.modal</code>) داخل عنصُر ثابت آخر في مشاكل.
* تستخدم النوافذ الشرطيّة الخاصيّة <code>[[PHP/position|position]]: fixed</code> التي قد تكون أحيانًا فريدة في طريقة عرضها. حاول قدر المستطاع وضع شفرة HTML الخاصّة بالنافذة الفرعيّة في مستوى علويّ لتفادي التداخل المُحتمل مع العناصر الأخرى. من المحتمل جدًّا أن يتسبّب وضع النافذة الشرطيّة (<code>‎.modal</code>) داخل عنصُر ثابت (fixed element) آخر في مشاكل.
* توجد بعض العراقيل في استخدام النوافذ الشرطيّة على الأجهزة الجوّالة، نظرًا - مُجدَّدًا - لاستخدام الخاصيّة<code>position: fixed</code>. راجع صفحة دعم المتصفّحات والأجهزة للمزيد من التفاصيل.
* توجد بعض العراقيل في استخدام النوافذ الشرطيّة على الأجهزة الجوّالة، نظرًا - مُجدَّدًا - لاستخدام الخاصيّة<code>position: fixed</code>. راجع صفحة دعم المتصفّحات والأجهزة للمزيد من التفاصيل.
* لا يؤثّر عنصُر <code>autofocus</code> في HTML على النوافذ الشرطيّة في Bootstrap، نظرًا لكون HTML5 [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus يعرّف معنى دلاليًّا] له. استخدم شفرة JavaScript مُخصَّصة للحصول على نفس التأثير.
* لا تؤثر خاصية <code>[[HTML/input#autofocus|autofocus]]</code> في HTML على النوافذ الشرطيّة في Bootstrap، نظرًا لكون HTML5 [[HTML/input#autofocus|تعرِّف معنى دلاليًّا]] له. استخدم شفرة JavaScript مُخصَّصة للحصول على نفس التأثير.


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
سطر 18: سطر 16:
})
})
</syntaxhighlight>
</syntaxhighlight>
'''تنبيه''': التحريك في هذه المُركبّة يعتمد على استعلام الوسائط <code>prefers-reduced-motion</code>، راجع [[Bootstrap/accessibility|صفحة سهولة الوصول]].


واصل القراءة للحصول على أمثلة توضيحية وقواعد استخدام مكوِّن النوافذ الشرطيّة في Bootstrap.
واصل القراءة للحصول على أمثلة توضيحية وقواعد استخدام مكوِّن النوافذ الشرطيّة في Bootstrap.
سطر 25: سطر 25:
=== مكوِّنات شرطيّة ===
=== مكوِّنات شرطيّة ===


يوجد أدناه مثال لنافذة شرطيّة ''ثابتة'' Static (بمعنى أنّ قيمتيْ الخاصيّتيْن <code>position</code> و <code>display</code> مُبطلتان). تتضمّن هذه النافذة الشرطيّة ترويسة، ومتنًا (مطلوبًا للحاشيّة <code>padding</code>) وتذييلًا (اختيّاري). يقترح مطوّرو Bootstrap تضمين إجراءات تجاهل (إخفاء النافذة) في الترويسة كلّ ما كان ذلك ممكنًا، أو توفير طريقة أخرى صريحة لإجراء التجاهل.
يوجد أدناه مثال لنافذة شرطيّة ''ثابتة'' Static (بمعنى أنّ قيمتيْ الخاصيّتيْن <code>[[CSS/position|position]]</code> و <code>[[CSS?display|display]]</code> قد تغيّرتا عن القيمة الافتراضية). تتضمّن هذه النافذة الشرطيّة ترويسة، ومتنًا (مطلوبًا للحاشيّة <code>[[CSS/padding|padding]]</code>) وتذييلًا (اختيّاري). يقترح مطوّرو Bootstrap تضمين إجراءات تجاهل (إخفاء النافذة) في الترويسة كلّ ما كان ذلك ممكنًا، أو توفير طريقة أخرى صريحة لإجراء التجاهل.


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<div class="modal" tabindex="-1" role="dialog">
<div class="modal" tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
   <div class="modal-dialog">
     <div class="modal-content">
     <div class="modal-content">
       <div class="modal-header">
       <div class="modal-header">
سطر 41: سطر 41:
       </div>
       </div>
       <div class="modal-footer">
       <div class="modal-footer">
         <button type="button" class="btn btn-primary">احفظ التغييرات</button>
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
         <button type="button" class="btn btn-primary">Save changes</button>
       </div>
       </div>
     </div>
     </div>
سطر 49: سطر 49:
</syntaxhighlight>
</syntaxhighlight>


=== مثال عمليّ ===
=== مثال عملي ===


جرّب الشفرة التاليّة وستحصُل على زرّ يمكّن النقر عليه من عرض نافذة شرطيّة تنزل من أعلى الصفحة ثم يخفُت التأثير عليها.
جرّب الشفرة التاليّة وستحصُل على زرّ يمكّن النقر عليه من عرض نافذة شرطيّة تنزل من أعلى الصفحة ثم يخفُت التأثير عليها.
سطر 61: سطر 61:
<!-- النافذة الشرطيّة -->
<!-- النافذة الشرطيّة -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
   <div class="modal-dialog">
     <div class="modal-content">
     <div class="modal-content">
       <div class="modal-header">
       <div class="modal-header">
سطر 75: سطر 75:
         <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
         <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
         <button type="button" class="btn btn-primary">احفظ التعديلات</button>
         <button type="button" class="btn btn-primary">احفظ التعديلات</button>
      </div>
    </div>
  </div>
</div>
</syntaxhighlight>
=== التراجع الثابت Static backdrop ===
عندما يُعيَّن التراجع (backdrop) إلى القيمة <code>static</code>، فلن تُغلق النافذة الشرطية عند النقر خارجها.<syntaxhighlight lang="html">
<!-- زر يطلق النافذة الشرطية -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  إطلاق نافذة ثابتة متراجعة
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">العنوان</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">واضح</button>
       </div>
       </div>
     </div>
     </div>
سطر 84: سطر 113:


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


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
سطر 149: سطر 177:
</syntaxhighlight>
</syntaxhighlight>


=== توسيط النوافذ الشرطيّة عموديا ===
=== توسيط النوافذ الشرطيّة عموديًا ===


أضف الصنف <code>‎.modal-dialog-centered</code> إلى <code>‎.modal-dialog</code> لتوسيط النافذة الشرطيّة عموديّا.
أضف الصنف <code>‎.modal-dialog-centered</code> إلى <code>‎.modal-dialog</code> لتوسيط النافذة الشرطيّة عموديّا.


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
سطر 185: سطر 212:


=== التلميحات Tooltips والعناصر المنبثقة Popovers ===
=== التلميحات Tooltips والعناصر المنبثقة Popovers ===
يمكن وضع [[Bootstrap/tooltips |التلميحات]] و[[Bootstrap/popovers |العناصر المنبثقة]] داخل نافذة شرطيّة. تُلغى جميع التلميحات والعناصر المنبثقة تلقائيًّا بعد إغلاق النافذة الشرطيّة.  
يمكن وضع [[Bootstrap/tooltips |التلميحات]] و[[Bootstrap/popovers |العناصر المنبثقة]] داخل نافذة شرطيّة. تُلغى جميع التلميحات والعناصر المنبثقة تلقائيًّا بعد إغلاق النافذة الشرطيّة.
<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<!-- زرّ إظهار النافذة الشرطيّة -->
<div class="modal-body">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
   <h5>Popover in a modal</h5>
  أظهر النافذة الشرطيّة
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute."></a> إطلاق نافذة منبثقة عن النقر على الزر</p>
</button>
  <hr>
 
  <h5>تلميح</h5>
<!-- النافذة الشرطيّة -->
  <p><a href="#" class="tooltip-test" title="Tooltip">هذا الرابط</a> و <a href="#" class="tooltip-test" title="Tooltip">هذا الرابط</a> يظهر تلميحان لهما عند المرور عليهما</p>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">عنوان النافذة الشرطيّة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <div class="modal-body">
    <h5>عنصُر منبثق ضمن نافذة شرطيّة</h5>
    <p>هذا <a href="#" role="button" class="btn btn-secondary popover-test" title="عنوان العنصُر المنبثق" data-content="يُعيَّن محتوى متن العنصُر المنبثق في هذه الخاصيّة">الزرّ</a> يُظهر عنصرًا منبثقا.</p>
    <hr>
    <h5>تلميحات في نافذة شرطيّة</h5>
    <p><a href="#" class="tooltip-test" title="تلميحة">هذا الرابط</a> و <a href="#" class="tooltip-test" title="تلميحة">هذا الرابط</a> تظهر عليهما تلميحات عند الحومان.</p>
    </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
        <button type="button" class="btn btn-primary">احفظ التغييرات</button>
      </div>
    </div>
  </div>
</div>
</div>


سطر 254: سطر 257:
   </div>
   </div>
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


=== تنويع محتوى النافذة الشرطيّة ===
=== تنويع محتوى النافذة الشرطيّة ===


استخدم الخاصيّة <code>event.relatedTarget</code> وخاصيّات <code>data-‎*‎</code> في HTML (يمكن استخدام [ https://api.jquery.com/data jQuery لهذا الغرض]) لتنويع محتوى النافذة الشرطيّة حسب الزّر الذي تسبّب في عرض النافذة.
استخدم الخاصيّة <code>event.relatedTarget</code> وخاصيّات <code>data-‎*‎</code> في HTML (يمكن استخدام [[jQuery/data|jQuery]] لهذا الغرض) لتنويع محتوى النافذة الشرطيّة حسب الزّر الذي تسبّب في عرض النافذة.


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
سطر 293: سطر 297:
   </div>
   </div>
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>شيفرة JavaScript:<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
$('#exampleModal').on('show.bs.modal', function (event) {
$('#exampleModal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget) // الزرّ الذي أظهر النافذة الشرطيّة
   var button = $(event.relatedTarget) // الزرّ الذي أظهر النافذة الشرطيّة
سطر 307: سطر 309:
</syntaxhighlight>
</syntaxhighlight>


=== حذف التحريكات ===
=== تغيير الحركات ===
يحدد المتغير <code>‎$modal-fade-transform</code> حالة التحويل الخاصة بـ <code>‎.modal-dialog</code>قبل حركة الخفوت. يحدد المتغير ‎<code>$modal-show-transform</code> تحويل <code>‎.modal-dialog</code> في نهاية حركة الخفوت.
 
إن أردت مثلا حركة تقريب، فعليك تعيين  ‎<code>$modal-fade-transform: scale(.8)‎</code>
 
=== حذف الحركات ===


تحصُل بحذف <code>‎.fade</code> الصنف على نافذة شرطيّة تظهر دون تأثير الخفوت والنزول من أعلى الشاشة.
تحصُل بحذف <code>‎.fade</code> الصنف على نافذة شرطيّة تظهر دون تأثير الخفوت والنزول من أعلى الشاشة.
سطر 315: سطر 322:
   ...
   ...
</div>
</div>
</syntaxhighlight>
</syntaxhighlight>


=== ارتفاعات ديناميكيّة ===
=== ارتفاعات ديناميكيّة ===


يؤدّي استخدام التابع <code>‎$('#myModal').modal('handleUpdate')</code> عند  تغيّر ارتفاع النافذة الشرطيّة إلى إعادة تموضعها في حال ظهور شريط التمرير.
يؤدّي استخدام التابع <code>‎$('#myModal').modal('handleUpdate')‎</code> عند  تغيّر ارتفاع النافذة الشرطيّة إلى إعادة تموضعها في حال ظهور شريط التمرير.


=== سهولة الوصول ===
=== سهولة الوصول ===
سطر 327: سطر 335:
=== تضمين فيديوهات من YouTube ===
=== تضمين فيديوهات من YouTube ===


يحتاج تضمين فيديوهات من YouTube في نوافذ شرطيّة إلى شفرة JavaScript إضافيّة - لا تتوفّر في Bootstrap - بهدف التوفّر على وظائف مثل إيقاف الفيديو وغيرها. راجع [https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal هذا المنشور المفيد على موقع Stack Overflow] للمزيد من المعلومات.
يحتاج تضمين فيديوهات من YouTube في نوافذ شرطيّة إلى شفرة JavaScript إضافيّة - لا تتوفّر في Bootstrap - بهدف التوفّر على وظائف مثل إيقاف الفيديو وغيرها. راجع [https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal هذا السؤال المفيد على موقع Stack Overflow] للمزيد من المعلومات.


== الأبعاد الاختيّاريّة ==
== الأبعاد الاختيارية ==


يوجد قيّاسان اختيّاريّان متوفّران عبر صنفيْن مُعدِّليْن يوضعان مع الصنف <code>‎.modal-dialog</code>. يرتدّ هذان القيّاسان في بعض النقاط الحديّة للحيلولة دون ظهور شريط تمرير أفقيّ في الأجهزة ذات الشاشات الضيّقة.
يوجد قيّاسان اختيّاريّان متوفّران عبر صنفيْن مُعدِّليْن يوضعان مع الصنف <code>‎.modal-dialog</code>. يُصغَّر هذان القيّاسان في بعض النقاط الحديّة للحيلولة دون ظهور شريط تمرير أفقيّ في الأجهزة ذات الشاشات الضيّقة.


<syntaxhighlight lang="html">
{| class="wikitable"
!حجم
!صنف
!max-width
|-
!صغير
|<code>.modal-sm</code>
|<code>300px</code>
|-
!افتراضي
|<code>None</code>
|<code>500px</code>
|-
!كبير
|<code>.modal-lg</code>
|<code>800px</code>
|-
!كبير جدا
|<code>.modal-xl</code>
|<code>1140px</code>
|}
الحجم المتوسط medium هو القيمة الافتراضية.<syntaxhighlight lang="html">
<!-- نافذة شرطيّة كبيرة -->
<!-- نافذة شرطيّة كبيرة -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">نافذة شرطيّة كبيرة</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">نافذة شرطيّة كبيرة</button>
سطر 357: سطر 386:


</syntaxhighlight>
</syntaxhighlight>
== استخدام مُلحَق JavaScript ==
== استخدام ملحق JavaScript ==


يبدّل مُلحَق JavaScript المحتوى المخفي حسب الحاجة، باستخدام خاصيّات البيانات أو شفرة JavaScript مُخصَّصة. كما يضيف هذا المُلحَق الصنف <code>‎.modal-open</code> إلى متن الصفحة (<code>&lt;body></code>) لإبطال إمكانيّة التمرير المبدئيّة عليه عند عرض النافذة الشرطيّة ويولّد الصنف <code>‎.modal-backdrop</code> لتوفير مساحة نقر لتجاهل النوافذ الشرطيّة عند النقر خارج النافذة الشرطيّة.
يبدّل مُلحَق JavaScript المحتوى المخفي حسب الحاجة، باستخدام خاصيّات البيانات أو شفرة JavaScript مُخصَّصة. كما يضيف هذا المُلحَق الصنف <code>‎.modal-open</code> إلى متن الصفحة (<code>[[HTML/body|&lt;body>]]</code>) لإبطال إمكانيّة التمرير المبدئيّة عليه عند عرض النافذة الشرطيّة ويولّد الصنف <code>‎.modal-backdrop</code> لتوفير مساحة نقر لتجاهل النوافذ الشرطيّة عند النقر خارج النافذة الشرطيّة.


=== استخدام خاصيّات البيانات ===
=== استخدام خاصيات البيانات ===


يمكن تفعيل نافذة شرطيّة بدون كتابة شفرة JavaScript مُخصَّصة بتعيين الخاصيّة <code>data-toggle="modal"‎</code> على عنصُر تحكّم - زرّ مثلًا - مع تعيين الخاصيّة <code>data-target="#foo"‎</code> أو <code>href="#foo"‎</code> لاستهداف نافذة شرطيّة مُعيَّنة لإظهارها (أو إخفائها).
يمكن تفعيل نافذة شرطيّة بدون كتابة شفرة JavaScript مُخصَّصة بتعيين الخاصيّة <code>data-toggle="modal"‎</code> على عنصُر تحكّم - زرّ مثلًا - مع تعيين الخاصيّة <code>data-target="#foo"‎</code> أو <code>href="#foo"‎</code> لاستهداف نافذة شرطيّة مُعيَّنة لإظهارها (أو إخفائها).


<syntaxhighlight lang="html">
<syntaxhighlight lang="html">
<button type="button" data-toggle="modal" data-target="#myModal">افتح النافذة الشرطيّة</button>
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
 
</syntaxhighlight>
</syntaxhighlight>


=== كتابة شفرة  JavaScript مُخصَّصة ===
=== كتابة شفرة  JavaScript مخصصة ===
يكفي سطرُ JavaScript واحد لاستدعاء نافذة شرطيّة ذات المُعرِّف <code>myModal</code>:
يكفي سطرُ JavaScript واحد لاستدعاء نافذة شرطيّة ذات المُعرِّف <code>myModal</code>:
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
سطر 375: سطر 405:
</syntaxhighlight>
</syntaxhighlight>


=== الخيّارات ===
=== الخيارات ===


يمكن تمرير  الخيّارات عبر خاصيّات البيانات أو باستخدام شفرة JavaScript مُخصَّصة. ألصق اسم الخيّار بـ <code>‎data-‎</code> (<code>data-backdrop=""</code>) لتمريره باستخدام خاصيّات البيانات.
يمكن تمرير  الخيّارات عبر خاصيّات البيانات أو باستخدام شفرة JavaScript مُخصَّصة. ألصق اسم الخيّار بـ <code>‎data-‎</code> ‏(كما في <code>data-backdrop=""‎</code>) لتمريره باستخدام خاصيّات البيانات.
 
{| class="wikitable"
!الاسم
!النوع
!القيمة المبدئيّة
!الوصف
|-
|<code>backdrop</code> (التراجع)
|قيمة منطقيّة أو سلسلة المحارف <code>'static'</code>
|<code>true</code>
|يضمِّن عنصرًا لإخفاء النافذة الشرطيّة عند النقر عليه. يمكن بدلًا من ذلك تحديد القيمة <code>static</code> لعنصُر تراجع لا يؤدّي لإخفاء النافذة الشرطيّة.
|-
|<code>keyboard</code> (لوحة المفاتيح)
|قيمة منطقيّة
|<code>true</code>
|إغلاق النافذة الشرطيّة عند الضغط على زرّ الهروب Esc في لوحة المفاتيح.
|-
|<code>focus</code> (تركيز المؤشّر)
|قيمة منطقيّة
|<code>true</code>
|تركيز المؤشّر على النافذة الشرطيّة عند تمهيدها.
|-
|<code>show</code> (عرض)
|قيمة منطقيّة
|<code>true</code>
|عرض النافذة الشرطيّة
|}


=== التوابع ===
=== التوابع ===
سطر 386: سطر 443:
[[Bootstrap/javascript|راجع توثيق JavaScript في Bootstrap للمزيد من المعلومات]].
[[Bootstrap/javascript|راجع توثيق JavaScript في Bootstrap للمزيد من المعلومات]].


==== <code>‎.modal(options)</code> ====
==== <code>‎.modal(options)‎</code> ====


ينشئ نافذة شرطيّة اعتمادًا على المحتوى الذي يُطبَّق عليه. يقبل كائن خيّارات اختيّاري.
ينشئ نافذة شرطيّة اعتمادًا على المحتوى الذي يُطبَّق عليه. يقبل كائن خيّارات اختيّاري.
سطر 396: سطر 453:
</syntaxhighlight>
</syntaxhighlight>


==== <code>‎.modal('toggle')</code> ====
==== <code>‎.modal('toggle')‎</code> ====


يُظهر - أو يخفي - النافذة شرطيّة. '''يعود إلى المستدعِي قبل أن تُعرَض النافذة الشرطيّة أو تُخفَى''' (أي قبل وقوع الحدث <code>shown.bs.modal</code> أو <code>hidden.bs.modal</code>).  
يُظهر - أو يخفي - النافذة شرطيّة. '''يعود إلى المستدعِي قبل أن تُعرَض النافذة الشرطيّة أو تُخفَى''' (أي قبل وقوع الحدث <code>shown.bs.modal</code> أو <code>hidden.bs.modal</code>).  
سطر 404: سطر 461:
</syntaxhighlight>
</syntaxhighlight>


==== <code>‎.modal('show')</code> ====
==== <code>‎.modal('show')‎</code> ====
يُظهر نافذة شرطيّة. '''يعود إلى المستدعِي قبل أن تُعرَض النافذة الشرطيّة ''' (أي قبل وقوع الحدث <code>shown.bs.modal</code>).
يُظهر نافذة شرطيّة. '''يعود إلى المستدعِي قبل أن تُعرَض النافذة الشرطيّة ''' (أي قبل وقوع الحدث <code>shown.bs.modal</code>).


سطر 411: سطر 468:
</syntaxhighlight>
</syntaxhighlight>


==== <code>‎.modal('hide')</code> ====
==== <code>‎.modal('hide')‎</code> ====
'''يعود إلى المستدعِي قبل أن تُخفَى النافذة الشرطيّة ''' (أي قبل وقوع الحدث <code>hidden.bs.modal</code>).
'''يعود إلى المستدعِي قبل أن تُخفَى النافذة الشرطيّة '''(أي قبل وقوع الحدث <code>hidden.bs.modal</code>).


<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
سطر 418: سطر 475:
</syntaxhighlight>
</syntaxhighlight>


==== <code>‎.modal('handleUpdate')</code> ====
==== <code>‎.modal('handleUpdate')‎</code> ====
يعدّل موضع النافذة الشرطيّة عند تغيّر ارتفاعها أثناء عرضها (بمعنى عند ظهور شريط التمرير).
يعدّل موضع النافذة الشرطيّة عند تغيّر ارتفاعها أثناء عرضها (بمعنى عند ظهور شريط التمرير).


سطر 425: سطر 482:
</syntaxhighlight>
</syntaxhighlight>


==== <code>‎.modal('dispose')</code> ====
==== <code>‎.modal('dispose')‎</code> ====


يحذف عنصُر النافذة الشرطيّة.
يحذف عنصُر النافذة الشرطيّة.


=== الأحداث ===
=== الأحداث ===
يعرض صنف  النوافذ الشرطيّة في إطار العمل Bootstrap بضعة أحداث للتعامل مع النافذة.  تُطلَق جميع أحداث الدوّار ضمن الدوّار نفسه (بمعنى أنّها على العنصُر <code>&lt;div class="modal"</code>>)
يعرض صنف  النوافذ الشرطيّة في إطار العمل Bootstrap بضعة أحداث للتعامل مع النافذة.  تُطلَق جميع أحداث الدوّار ضمن الدوّار نفسه (بمعنى أنّها على العنصُر <code>&lt;div class="modal"‎&gt;</code>)
 
{| class="wikitable"
 
!نوع الحدث
!الوصف
|-
|<code>show.bs.modal</code>
|يُطلَق هذا الحدث مباشرة بعد استدعاء التابع<code>show</code>. إنْ كان السببُ في هذا الحدث هو النقر على عنصُر فإنّ العنصُر يتوفّر ضمن الخاصيّة <code>relatedTarget</code> في الحدث.
|-
|<code>shown.bs.modal</code>
|يُطلَق هذا الحدث عندما تصبح النافذة الشرطيّة مرئيّة للزائر (ينتظر اكتمال انتقالات CSS). إنْ كان السببُ في هذا الحدث هو النقر على عنصُر فإنّ العنصُر يتوفّر ضمن الخاصيّة <code>relatedTarget</code> في الحدث.
|-
|<code>hide.bs.modal</code>
|يُطلَق هذا الحدث مباشرة بعد استدعاء التابع <code>hide</code>.
|-
|<code>hidden.bs.modal</code>
| يُطلَق هذا الحدث عندما تصبح النافذة الشرطيّة مخفيّة عن الزائر (ينتظر اكتمال انتقالات CSS).
|-
|<code>hidePrevented.bs.modal</code>
|يُطلَق هذا الحدث عندما تظهر النافذة الشرطيّة. قيمة  backdrop  خاصتها تساوي <code>static</code> . في حال النقر خارجها أو النقر على زر  <code>escape</code> فسيُنفّذ بخيار لوحة المفاتيح أو تعيين <code>data-keyboard</code> إلى القيمة <code>false</code>.
|}
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
$('#myModal').on('hidden.bs.modal', function (e) {
$('#myModal').on('hidden.bs.modal', function (e) {
سطر 440: سطر 514:


== مصادر ==
== مصادر ==
* [https://getbootstrap.com/docs/4.0/components/modal/ صفحة Modal في توثيق Bootstrap].
* [https://getbootstrap.com/docs/4.5/components/modal/ صفحة Modal في توثيق Bootstrap].
[[تصنيف:Bootstrap|{{SUBPAGENAME}}]]
[[تصنيف:Bootstrap components|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 11:21، 12 يوليو 2020

استخدم ملحَق JavaScript الخاصّ بالنوافذ الشرطيّة Modal لإضافة حوارات على شكل صناديق خفيفة إلى موقعك، أو إشعارات أو محتوى مُخصَّص بالكامل.

آليّة العمل

تأكّد من قراءة الفقرات التاليّة قبل البدء في استخدام مكوِّن النوافذ الشرطيّة في إطار العمل Bootstrap، إذ أنّ خيّارات القوائم عُدِّلت في الإصدارات الأخيرة.

  • تُنشَأ النوافذ الشرطية باستخدام HTML و CSS و JavaScript. تتموضع النوافذ الشرطيّة فوق مكوِّنات الصفحة جميعها وتحذف قابليّة التمرير من متن الصفحة (<body>) بحيث يُمرَّر محتوى النافذة الشرطيّة بدلًا من المتن.
  • تُغلَق النافذة الشرطيّة فور النقر على زر التراجع.
  • لا يدعم إطار العمل Bootstrap سوى نافذة شرطيّة واحدة في كلّ مرة؛ كما أنّه لا يدعم النوافذ الشرطيّة المتداخلة (نافذة شرطيّة داخل نافذة شرطيّة) ويعدّها تجربة مستخدم سيّئة.
  • تستخدم النوافذ الشرطيّة الخاصيّة position: fixed التي قد تكون أحيانًا فريدة في طريقة عرضها. حاول قدر المستطاع وضع شفرة HTML الخاصّة بالنافذة الفرعيّة في مستوى علويّ لتفادي التداخل المُحتمل مع العناصر الأخرى. من المحتمل جدًّا أن يتسبّب وضع النافذة الشرطيّة (‎.modal) داخل عنصُر ثابت (fixed element) آخر في مشاكل.
  • توجد بعض العراقيل في استخدام النوافذ الشرطيّة على الأجهزة الجوّالة، نظرًا - مُجدَّدًا - لاستخدام الخاصيّةposition: fixed. راجع صفحة دعم المتصفّحات والأجهزة للمزيد من التفاصيل.
  • لا تؤثر خاصية autofocus في HTML على النوافذ الشرطيّة في Bootstrap، نظرًا لكون HTML5 تعرِّف معنى دلاليًّا له. استخدم شفرة JavaScript مُخصَّصة للحصول على نفس التأثير.
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

تنبيه: التحريك في هذه المُركبّة يعتمد على استعلام الوسائط prefers-reduced-motion، راجع صفحة سهولة الوصول.

واصل القراءة للحصول على أمثلة توضيحية وقواعد استخدام مكوِّن النوافذ الشرطيّة في Bootstrap.

أمثلة

مكوِّنات شرطيّة

يوجد أدناه مثال لنافذة شرطيّة ثابتة Static (بمعنى أنّ قيمتيْ الخاصيّتيْن position و display قد تغيّرتا عن القيمة الافتراضية). تتضمّن هذه النافذة الشرطيّة ترويسة، ومتنًا (مطلوبًا للحاشيّة padding) وتذييلًا (اختيّاري). يقترح مطوّرو Bootstrap تضمين إجراءات تجاهل (إخفاء النافذة) في الترويسة كلّ ما كان ذلك ممكنًا، أو توفير طريقة أخرى صريحة لإجراء التجاهل. 

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">عنوان النافذة الشرطيّة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>يوجد هنا محتوى النافذة الشرطيّة النصّي</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

مثال عملي

جرّب الشفرة التاليّة وستحصُل على زرّ يمكّن النقر عليه من عرض نافذة شرطيّة تنزل من أعلى الصفحة ثم يخفُت التأثير عليها. 

<!-- زرّ إظهار النافذة الشرطيّة -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  أظهر النافذة الشرطيّة
</button>

<!-- النافذة الشرطيّة -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">عنوان النافذة الشرطيّة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        نصّ في متن النافذة الشرطيّة
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
        <button type="button" class="btn btn-primary">احفظ التعديلات</button>
      </div>
    </div>
  </div>
</div>

التراجع الثابت Static backdrop

عندما يُعيَّن التراجع (backdrop) إلى القيمة static، فلن تُغلق النافذة الشرطية عند النقر خارجها.

<!-- زر يطلق النافذة الشرطية -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  إطلاق نافذة ثابتة متراجعة
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">العنوان</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">واضح</button>
      </div>
    </div>
  </div>
</div>

تمرير محتوى طويل

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

<!-- زرّ إظهار النافذة الشرطيّة -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  أظهر النافذة الشرطيّة
</button>

<!-- النافذة الشرطيّة -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">عنوان النافذة الشرطيّة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
        <button type="button" class="btn btn-primary">احفظ التعديلات</button>
      </div>
    </div>
  </div>
</div>

توسيط النوافذ الشرطيّة عموديًا

أضف الصنف ‎.modal-dialog-centered إلى ‎.modal-dialog لتوسيط النافذة الشرطيّة عموديّا. 

<!-- زرّ إظهار النافذة الشرطيّة -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  أظهر النافذة الشرطيّة
</button>

<!-- النافذة الشرطيّة -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">عنوان النافذة الشرطيّة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
      أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ أبجد هوز حطي كلمن سعفص قرشت ثخذ ضظغ.
      <p/>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
        <button type="button" class="btn btn-primary">احفظ التغييرات</button>
      </div>
    </div>
  </div>
</div>

التلميحات Tooltips والعناصر المنبثقة Popovers

يمكن وضع التلميحات والعناصر المنبثقة داخل نافذة شرطيّة. تُلغى جميع التلميحات والعناصر المنبثقة تلقائيًّا بعد إغلاق النافذة الشرطيّة. 

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute."></a> إطلاق نافذة منبثقة عن النقر على الزر</p>
  <hr>
  <h5>تلميح</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">هذا الرابط</a> و <a href="#" class="tooltip-test" title="Tooltip">هذا الرابط</a> يظهر تلميحان لهما عند المرور عليهما</p>
</div>

استخدام نظام الشبكة

يؤدّي تضمين الصنف ‎.container-fluid داخل نافذة شرطيّة (‎.modal-body) إلى تفعيل نظام الشبكة في Bootstrap على مستوى النافذة الشرطيّة. يمكن بعدها استخدام أصناف نظام الشبكة بالطريقة الاعتيّاديّة. 

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

تنويع محتوى النافذة الشرطيّة

استخدم الخاصيّة event.relatedTarget وخاصيّات data-‎*‎ في HTML (يمكن استخدام jQuery لهذا الغرض) لتنويع محتوى النافذة الشرطيّة حسب الزّر الذي تسبّب في عرض النافذة. 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">افتح نافذة الشرطيّة للمستلم @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">افتح نافذة الشرطيّة للمستلم @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">افتح نافذة الشرطيّة للمستلم @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">رسالة جديدة</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">المستلِم:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">الرسالة:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">أغلق</button>
        <button type="button" class="btn btn-primary">أرسل الرسالة</button>
      </div>
    </div>
  </div>
</div>

شيفرة JavaScript:

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // الزرّ الذي أظهر النافذة الشرطيّة
  var recipient = button.data('whatever') // استخراج المعلومات من الخاصيّات data-* 
  // يمكن إنْ اقتضت الحاجة بدْء طلب AJAX هنا (ثم تحديث المحتوى عبر تابع الرد Callback).
  // تحديث محتوى النافذة الشرطيّة. نستخدم jQuery هنا، إلّا أنه يمكن استخدام مكتبة ربط من طرف ثالث أو توابع أخرى 
  var modal = $(this)
  modal.find('.modal-title').text('رسالة جديدة إلى ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

تغيير الحركات

يحدد المتغير ‎$modal-fade-transform حالة التحويل الخاصة بـ ‎.modal-dialogقبل حركة الخفوت. يحدد المتغير ‎$modal-show-transform تحويل ‎.modal-dialog في نهاية حركة الخفوت.

إن أردت مثلا حركة تقريب، فعليك تعيين  ‎$modal-fade-transform: scale(.8)‎

حذف الحركات

تحصُل بحذف ‎.fade الصنف على نافذة شرطيّة تظهر دون تأثير الخفوت والنزول من أعلى الشاشة. 

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

ارتفاعات ديناميكيّة

يؤدّي استخدام التابع ‎$('#myModal').modal('handleUpdate')‎ عند تغيّر ارتفاع النافذة الشرطيّة إلى إعادة تموضعها في حال ظهور شريط التمرير.

سهولة الوصول

تأكّد من إضافة الخاصيّتين role="dialog"‎ و aria-labelledby="..."‎ (قيمة الخاصيّة الأخيرة هي عنوان النافذة الشرطيّة) إلى ‎.modal والخاصيّة role="document"‎ إلى ‎.modal-dialog. يمكن علاوة على ذلك إضافة وصف للنافذة الشرطيّة ضمن الخاصيّة aria-describedby في الصنف ‎.modal.

تضمين فيديوهات من YouTube

يحتاج تضمين فيديوهات من YouTube في نوافذ شرطيّة إلى شفرة JavaScript إضافيّة - لا تتوفّر في Bootstrap - بهدف التوفّر على وظائف مثل إيقاف الفيديو وغيرها. راجع هذا السؤال المفيد على موقع Stack Overflow للمزيد من المعلومات.

الأبعاد الاختيارية

يوجد قيّاسان اختيّاريّان متوفّران عبر صنفيْن مُعدِّليْن يوضعان مع الصنف ‎.modal-dialog. يُصغَّر هذان القيّاسان في بعض النقاط الحديّة للحيلولة دون ظهور شريط تمرير أفقيّ في الأجهزة ذات الشاشات الضيّقة.

حجم صنف max-width
صغير .modal-sm 300px
افتراضي None 500px
كبير .modal-lg 800px
كبير جدا .modal-xl 1140px

الحجم المتوسط medium هو القيمة الافتراضية.

<!-- نافذة شرطيّة كبيرة -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">نافذة شرطيّة كبيرة</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- نافذة شرطيّة صغيرة -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">نافذة شرطيّة صغيرة</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

استخدام ملحق JavaScript

يبدّل مُلحَق JavaScript المحتوى المخفي حسب الحاجة، باستخدام خاصيّات البيانات أو شفرة JavaScript مُخصَّصة. كما يضيف هذا المُلحَق الصنف ‎.modal-open إلى متن الصفحة (<body>) لإبطال إمكانيّة التمرير المبدئيّة عليه عند عرض النافذة الشرطيّة ويولّد الصنف ‎.modal-backdrop لتوفير مساحة نقر لتجاهل النوافذ الشرطيّة عند النقر خارج النافذة الشرطيّة.

استخدام خاصيات البيانات

يمكن تفعيل نافذة شرطيّة بدون كتابة شفرة JavaScript مُخصَّصة بتعيين الخاصيّة data-toggle="modal"‎ على عنصُر تحكّم - زرّ مثلًا - مع تعيين الخاصيّة data-target="#foo"‎ أو href="#foo"‎ لاستهداف نافذة شرطيّة مُعيَّنة لإظهارها (أو إخفائها). 

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

كتابة شفرة JavaScript مخصصة

يكفي سطرُ JavaScript واحد لاستدعاء نافذة شرطيّة ذات المُعرِّف myModal: 

$('#myModal').modal(options)

الخيارات

يمكن تمرير الخيّارات عبر خاصيّات البيانات أو باستخدام شفرة JavaScript مُخصَّصة. ألصق اسم الخيّار بـ ‎data-‎ ‏(كما في data-backdrop=""‎) لتمريره باستخدام خاصيّات البيانات.

الاسم النوع القيمة المبدئيّة الوصف
backdrop (التراجع) قيمة منطقيّة أو سلسلة المحارف 'static' true يضمِّن عنصرًا لإخفاء النافذة الشرطيّة عند النقر عليه. يمكن بدلًا من ذلك تحديد القيمة static لعنصُر تراجع لا يؤدّي لإخفاء النافذة الشرطيّة.
keyboard (لوحة المفاتيح) قيمة منطقيّة true إغلاق النافذة الشرطيّة عند الضغط على زرّ الهروب Esc في لوحة المفاتيح.
focus (تركيز المؤشّر) قيمة منطقيّة true تركيز المؤشّر على النافذة الشرطيّة عند تمهيدها.
show (عرض) قيمة منطقيّة true عرض النافذة الشرطيّة

التوابع

تنبيه: التوابع غير المتزامنة والانتقالات

توابع واجهة التطبيقات جميعها غير متزامنة وتشغّل انتقالا. تعود هذه التوابع لشفرة الاستدعاء مباشرةً بعد بدء الانتقال، لكن قبل أن ينتهي. علاوةً على ذلك، يُتجاهل استدعاء تابع على مكوِّن في طور الانتقال.

راجع توثيق JavaScript في Bootstrap للمزيد من المعلومات.

‎.modal(options)‎

ينشئ نافذة شرطيّة اعتمادًا على المحتوى الذي يُطبَّق عليه. يقبل كائن خيّارات اختيّاري. 

$('#myModal').modal({
  keyboard: false
})

‎.modal('toggle')‎

يُظهر - أو يخفي - النافذة شرطيّة. يعود إلى المستدعِي قبل أن تُعرَض النافذة الشرطيّة أو تُخفَى (أي قبل وقوع الحدث shown.bs.modal أو hidden.bs.modal). 

$('#myModal').modal('toggle')

‎.modal('show')‎

يُظهر نافذة شرطيّة. يعود إلى المستدعِي قبل أن تُعرَض النافذة الشرطيّة (أي قبل وقوع الحدث shown.bs.modal). 

$('#myModal').modal('show')

‎.modal('hide')‎

يعود إلى المستدعِي قبل أن تُخفَى النافذة الشرطيّة (أي قبل وقوع الحدث hidden.bs.modal). 

$('#myModal').modal('hide')

‎.modal('handleUpdate')‎

يعدّل موضع النافذة الشرطيّة عند تغيّر ارتفاعها أثناء عرضها (بمعنى عند ظهور شريط التمرير). 

$('#myModal').modal('handleUpdate')

‎.modal('dispose')‎

يحذف عنصُر النافذة الشرطيّة.

الأحداث

يعرض صنف النوافذ الشرطيّة في إطار العمل Bootstrap بضعة أحداث للتعامل مع النافذة. تُطلَق جميع أحداث الدوّار ضمن الدوّار نفسه (بمعنى أنّها على العنصُر <div class="modal"‎>)

نوع الحدث الوصف
show.bs.modal يُطلَق هذا الحدث مباشرة بعد استدعاء التابعshow. إنْ كان السببُ في هذا الحدث هو النقر على عنصُر فإنّ العنصُر يتوفّر ضمن الخاصيّة relatedTarget في الحدث.
shown.bs.modal يُطلَق هذا الحدث عندما تصبح النافذة الشرطيّة مرئيّة للزائر (ينتظر اكتمال انتقالات CSS). إنْ كان السببُ في هذا الحدث هو النقر على عنصُر فإنّ العنصُر يتوفّر ضمن الخاصيّة relatedTarget في الحدث.
hide.bs.modal يُطلَق هذا الحدث مباشرة بعد استدعاء التابع hide.
hidden.bs.modal يُطلَق هذا الحدث عندما تصبح النافذة الشرطيّة مخفيّة عن الزائر (ينتظر اكتمال انتقالات CSS).
hidePrevented.bs.modal يُطلَق هذا الحدث عندما تظهر النافذة الشرطيّة. قيمة backdrop  خاصتها تساوي static . في حال النقر خارجها أو النقر على زر escape فسيُنفّذ بخيار لوحة المفاتيح أو تعيين data-keyboard إلى القيمة false. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // افعل شيئًا هنا ...
})

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=Bootstrap/modal&oldid=29687»