النافذة المنبثقة (Modal)

استخدم إضافة JavaScript modal الخاصة بـ الـ Bootstrap لإضافة مربعات حوار إلى موقعك من أجل lightboxes، أو إشعارات المستخدم، أو محتوى مخصص بالكامل.

في هذه الصفحة

كيف يعمل ؟

قبل البدء باستخدام مكوّن modal الخاص بالـ Bootstrap، تأكد من قراءة ما يلي لأن خيارات القائمة لدينا قد تغيّرت مؤخراً.

يتم بناء الـ Modals باستخدام الـ HTML وCSS وJavaScript. ويتم وضعها فوق كل شيء آخر في المستند، كما تُزيل التمرير من <body> بحيث يتم تمرير محتوى الـ modal داخله بدلاً من ذلك.
سيؤدي النقر على "الخلفية" (backdrop) الخاصة بالـ modal إلى إغلاقه تلقائياً.
يدعم الـ Bootstrap نافذة modal واحدة فقط في كل مرة. ولا يتم دعم الـ modals المتداخلة (nested modals) لأننا نعتبرها تجربة استخدام غير جيدة.
تستخدم الـ Modals الخاصية position: fixed، والتي قد تكون أحياناً حساسة بعض الشيء فيما يتعلق بطريقة التصيير (rendering). كلما أمكن، ضع HTML الخاص بالـ modal في موضع ذي مستوى أعلى لتجنب أي تداخل محتمل مع العناصر الأخرى. ومن المرجح أن تواجه مشكلات عند تضمين .modal داخل عنصر ثابت (fixed element) آخر.
مرة أخرى، وبسبب استخدام position: fixed، توجد بعض القيود المتعلقة باستخدام الـ modals على الأجهزة المحمولة. راجع مستندات دعم المتصفحات الخاصة بنا للحصول على التفاصيل.
بسبب الطريقة التي يعرّف بها HTML5 الدلالات (semantics) الخاصة به، فإن سمة HTML autofocus ليس لها أي تأثير داخل الـ Bootstrap modals. ولتحقيق التأثير نفسه، استخدم بعض أكواد JavaScript المخصصة:

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

تعتمد تأثيرات الرسوم المتحركة لهذا المكوّن على استعلام الوسائط (media query) الخاص بـ prefers-reduced-motion. راجع قسم تقليل الحركة في مستندات إمكانية الوصول لدينا.

استمر في القراءة للاطلاع على العروض التوضيحية وإرشادات الاستخدام.

أمثلة

فيما يلي مثال على modal ثابت (static) (مما يعني أن الخاصيتين position وdisplay قد تم تجاوزهما). يتضمن المثال رأس الـ modal، وجسم الـ modal (وهو مطلوب لتطبيق padding)، وتذييل الـ modal (اختياري). ونوصي بأن تقوم، كلما أمكن، بتضمين رؤوس للـ modal تحتوي على إجراءات إغلاق (dismiss actions)، أو توفير إجراء إغلاق صريح آخر.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

في المثال الثابت أعلاه، نستخدم <h5> لتجنب المشكلات المتعلقة بالتسلسل الهرمي للعناوين في صفحة المستندات. ومع ذلك، من الناحية الهيكلية، يمثل مربع الحوار modal مستنداً/سياقاً منفصلاً خاصاً به، لذلك يُفترض بشكل مثالي أن يكون modal-title. عبارة عن <h1>. وإذا لزم الأمر، يمكنك استخدام أدوات حجم الخط للتحكم في مظهر العنوان. تعتمد جميع الأمثلة الحية التالية هذا الأسلوب.

عرض توضيحي مباشر

شغّل عرضاً تجريبياً يعمل للـ modal بالنقر على الزر أدناه. سوف ينزلق للأسفل ويظهر تدريجياً من أعلى الصفحة.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

خلفية ثابتة

عند ضبط الـ backdrop على static، لن يتم إغلاق الـ modal عند النقر خارج حدوده. انقر على الزر أدناه لتجربته.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

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

عندما يصبح الـ modals طويلاً جداً بالنسبة إلى إطار العرض (viewport) الخاص بالمستخدم أو جهازه، فإنه يتم تمريره بشكل مستقل عن الصفحة نفسها. جرّب العرض التوضيحي أدناه لمعرفة ما نقصده.

يمكنك أيضاً إنشاء modal قابل للتمرير يسمح بتمرير جسم الـ modal عن طريق إضافة .modal-dialog-scrollable إلى .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

توسيط عمودي

أضف .modal-dialog-centered إلى .modal-dialog لتوسيط الـ modal عمودياً.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

تلميحات الأدوات والـ (popovers)

يمكن وضع تلميحات الأدوات (Tooltips) و popovers داخل الـ modals عند الحاجة. وعند إغلاق الـ modals، يتم أيضاً إخفاء أي Tooltips و popovers موجودة بداخلها تلقائياً.

<div class="modal-body">
  <h2 class="fs-5">Popover in a modal</h2>
  <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p>
  <hr>
  <h2 class="fs-5">Tooltips in a modal</h2>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

استخدام الـ (grid)

استخدم نظام الـ grid الخاص بـ Bootstrap داخل الـ modal عن طريق تضمين .container-fluid داخل .modal-body. ثم استخدم فئات نظام الـ grid العادية كما تفعل في أي مكان آخر.

<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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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 و سمات HTML data-bs-* لتغيير محتويات النافذة المنبثقة بناءً على الزر الذي تم النقر عليه.

فيما يلي عرض توضيحي مباشر يليه مثال على HTML وJavaScript. لمزيد من المعلومات، اقرأ مستندات أحداث النافذة المنبثقة للحصول على تفاصيل حول relatedTarget.

html

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

site/src/assets/partials/snippets.js

const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {
    // Button that triggered the modal
    const button = event.relatedTarget
    // Extract info from data-bs-* attributes
    const recipient = button.getAttribute('data-bs-whatever')
    // If necessary, you could initiate an Ajax request here
    // and then do the updating in a callback.

    // Update the modal's content.
    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body input')

    modalTitle.textContent = `New message to ${recipient}`
    modalBodyInput.value = recipient
  })
}

التبديل بين عدة نوافذ منبثقة

يمكنك التبديل بين عدة نوافذ منبثقة من خلال وضع ذكي لسمات data-bs-target و data-bs-toggle. على سبيل المثال، يمكنك التبديل إلى نافذة إعادة تعيين كلمة المرور من داخل نافذة تسجيل دخول مفتوحة بالفعل. يرجى ملاحظة أنه لا يمكن فتح عدة نوافذ منبثقة في نفس الوقت—هذه الطريقة تقوم ببساطة بالتبديل بين نافذتين منفصلتين.

html

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>

تغيير الحركة

يحدد المتغير $modal-fade-transform حالة التحويل (transform) لـ .modal-dialog قبل حركة التلاشي للداخل (fade-in) الخاصة بالـ modal، بينما يحدد المتغير $modal-show-transform تحويل .modal-dialog عند نهاية حركة التلاشي للداخل.

إذا كنت تريد، على سبيل المثال، حركة تكبير (zoom-in)، يمكنك ضبط $modal-fade-transform: scale(.8).

إزالة الحركة

بالنسبة للـ modals التي تظهر ببساطة بدلاً من التلاشي في العرض، قم بإزالة الفئة .fade من ترميز الـ modal الخاص بك.

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

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

إذا تغير ارتفاع الـ modal أثناء فتحه، يجب عليك استدعاء myModal.handleUpdate() لإعادة ضبط موضع الـ modal في حال ظهور شريط التمرير.

إمكانية الوصول

تأكد من إضافة aria-labelledby="..."، الذي يشير إلى عنوان الـ modal، إلى .modal. بالإضافة إلى ذلك، يمكنك تقديم وصف لمربع حوار الـ modal الخاص بك باستخدام aria-describedby على .modal. لاحظ أنك لست بحاجة إلى إضافة role="dialog" لأننا نضيفه بالفعل عبر JavaScript.

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

يتطلب تضمين فيديوهات YouTube في الـ modals استخدام JavaScript إضافي غير موجود في Bootstrap لإيقاف التشغيل تلقائياً وأكثر. راجع منشور Stack Overflow المفيد هذا لمزيد من المعلومات.

أحجام اختيارية

تتوفر للـ Modals ثلاثة أحجام اختيارية، متاحة عبر فئات معدلة (modifier classes) يتم وضعها على .modal-dialog. تبدأ هذه الأحجام في العمل عند نقاط توقف (breakpoints) معينة لتجنب ظهور أشرطة التمرير الأفقية على شاشات العرض الضيقة.

الحجم	الفئة (Class)	أقصى عرض للنافذة المنبثقة (max-width)
Small	`.modal-sm`	`300px`
Default	None	`500px`
Large	`.modal-lg`	`800px`
Extra large	`.modal-xl`	`1140px`

يمثّل الـ modal الافتراضي لدينا، من دون أي فئة (class) مُعدِّلة، حجم الـ modal "المتوسط" (medium).

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

تجاوز آخر هو خيار إظهار نافذة modal تغطي إطار عرض المستخدم (viewport)، وهو متاح عبر فئات معدلة (modifier classes) يتم وضعها على modal-dialog..

الفئة (Class)	التوفر (Availability)
`.modal-fullscreen`	دائماً (Always)
`.modal-fullscreen-sm-down`	`576px`
`.modal-fullscreen-md-down`	`768px`
`.modal-fullscreen-lg-down`	`992px`
`.modal-fullscreen-xl-down`	`1200px`
`.modal-fullscreen-xxl-down`	`1400px`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

الـ (CSS)

المتغيرات (Variables)

تمت الإضافة في الإصدار v5.2.0

كجزء من نهج الـ CSS variables المتطور في Bootstrap، تستخدم الـ modals الآن متغيرات CSS محلية على .modal و .modal-backdrop لتعزيز التخصيص في الوقت الفعلي. يتم تعيين قيم متغيرات CSS عبر Sass، لذا لا يزال تخصيص Sass مدعوماً أيضاً.

scss/_modal.scss

--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};

scss/_modal.scss

--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

متغيرات الـ (Sass)

scss/_variables.scss

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               var(--#{$prefix}body-color);
$modal-content-bg:                  var(--#{$prefix}body-bg);
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        var(--#{$prefix}border-width);
$modal-content-border-radius:       var(--#{$prefix}border-radius-lg);
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm);
$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow);

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

حلقات الـ (Sass loops)

يتم إنشاء النوافذ المنبثقة بملء الشاشة المتوافقة مع الشاشات عبر الخريطة $breakpoints وحلقة تكرار في scss/_modal.scss.

scss/_modal.scss

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

الاستخدام

تقوم إضافة الـ modal بتبديل ظهور المحتوى المخفي عند الطلب، عبر سمات البيانات (data attributes) أو JavaScript. كما أنها تتجاوز سلوك التمرير الافتراضي وتنشئ .modal-backdrop لتوفير منطقة نقر لإغلاق النوافذ المنبثقة المعروضة عند النقر خارج الـ modal.

عبر سمات البيانات (Via data attributes)

التبديل (Toggle)

قم بتنشيط الـ modal دون كتابة JavaScript. ضع data-bs-toggle="modal" على عنصر التحكم، مثل الزر، جنباً إلى جنب مع data-bs-target="#foo" أو href="#foo" لاستهداف modal معين لتبديله.

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

الإغلاق (Dismiss)

يمكن تحقيق الإغلاق باستخدام سمة data-bs-dismiss على زر داخل الـ modal كما هو موضح أدناه:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

أو على زر خارج الـ modal باستخدام data-bs-target الإضافية كما هو موضح أدناه:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>

على الرغم من أن كلتا طريقتَي إغلاق الـ modal مدعومتان، فضع في اعتبارك أن إغلاقه من خارج الـ modal لا يتوافق مع نمط dialog (modal) الوارد في دليل ممارسات التأليف ARIA (ARIA Authoring Practices Guide). استخدم ذلك على مسؤوليتك الخاصة.

عبر الـ (JavaScript)

أنشئ modal بسطر واحد من الـ JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

خيارات

بما أنه يمكن تمرير الخيارات عبر سمات البيانات (data attributes) أو الـ JavaScript، يمكنك إضافة اسم الخيار إلى -data-bs ، كما في "data-bs-animation="{value}. تأكد من تغيير نوع حالة اسم الخيار من “camelCase” إلى “kebab-case” عند تمرير الخيارات عبر سمات البيانات. على سبيل المثال، استخدم "data-bs-custom-class="beautifier بدلاً من "data-bs-customClass="beautifier.

بدءاً من Bootstrap 5.2.0، تدعم جميع المكونات سمة بيانات محجوزة تجريبية وهي data-bs-config والتي يمكن أن تحتوي على تكوين بسيط للمكون كسلسلة JSON. عندما يحتوي العنصر على سمات 'data-bs-config='{"delay":0, "title":123} و "data-bs-title="456، ستكون قيمة title النهائية هي 456 وستقوم سمات البيانات المنفصلة بتجاوز القيم المعطاة في data-bs-config. بالإضافة إلى ذلك، يمكن لسمات البيانات الموجودة أن تحتوي على قيم JSON مثل 'data-bs-delay='{"show":0,"hide":150}.

كائن التكوين النهائي هو النتيجة المدمجة لـ data-bs-config و -data-bs و js object حيث يقوم آخر مفتاح-قيمة مُعطى بتجاوز القيم الأخرى.

الاسم	النوع	الإفتراضي	الوصف
`backdrop`	boolean, `’static'`	`true`	يتضمن عنصر خلفية للـ modal (modal-backdrop). بدلاً من ذلك، حدد `static` للخلفية التي لا تغلق الـ modal عند النقر عليها.
`focus`	boolean	`true`	يضع التركيز على الـ modal عند تهيئته.
`keyboard`	boolean	`true`	يغلق الـ modal عند الضغط على مفتاح escape.

الطرق، الأساليب (Methods)

جميع دوال الـ API هي دوال غير متزامنة (asynchronous) وتبدأ عملية انتقال (transition). وهي تعود إلى المستدعي بمجرد بدء عملية الانتقال، ولكن قبل انتهائها. بالإضافة إلى ذلك، سيتم تجاهل أي استدعاء للدالة على مكوّن يمر حالياً بعملية انتقال. تعرف على المزيد في مستندات JavaScript الخاصة بنا.

خيارات التمرير

يُفعِّل المحتوى الخاص بك كـ modal. ويقبل object للخيارات (options) بشكل اختياري.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})

الأسلوب	الوصف
`dispose`	يقوم بتدمير الـ modal الخاص بالعنصر. (يزيل البيانات المخزنة في عنصر الـ DOM)
`getInstance`	طريقة Static تسمح لك بالحصول على نسخة الـ modal المرتبطة بعنصر DOM.
`getOrCreateInstance`	طريقة Static تسمح لك بالحصول على نسخة الـ modal المرتبطة بعنصر DOM، أو إنشاء نسخة جديدة في حال لم يتم تهيئتها.
`handleUpdate`	إعادة ضبط موضع الـ modal يدوياً إذا تغير ارتفاع الـ modal أثناء فتحه (على سبيل المثال، في حال ظهور شريط تمرير).
`hide`	يخفي الـ modal يدوياً. يعود إلى المستدعي قبل أن يتم إخفاء الـ modal فعلياً (أي قبل وقوع حدث `hidden.bs.modal`).
`show`	يفتح الـ modal يدوياً. يعود إلى المستدعي قبل أن يتم إظهار الـ modal فعلياً (أي قبل وقوع حدث `shown.bs.modal`). كما يمكنك تمرير عنصر DOM كمعامل يمكن استقباله في أحداث الـ modal (كخاصية `relatedTarget`). (مثال: `const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle)`).
`toggle`	يقوم بتبديل حالة الـ modal يدوياً. يعود إلى المستدعي قبل أن يتم إظهار أو إخفاء الـ modal فعلياً (أي قبل وقوع حدث `shown.bs.modal` أو `hidden.bs.modal`).

الأحداث (Events)

توفر الفئة (class) الخاصة بالـ modal في Bootstrap بعض الأحداث للربط بوظائف الـ modal. يتم إطلاق جميع أحداث الـ modal على الـ modal نفسه (أي على <div class="modal">).

الحدث	الوصف
`hide.bs.modal`	يتم إطلاق هذا الحدث فوراً عند استدعاء طريقة النسخة `hide`. يمكن منعه عن طريق استدعاء `event.preventDefault()`. راجع مستندات أحداث JavaScript لمزيد من التفاصيل حول منع الأحداث.
`hidden.bs.modal`	يتم إطلاق هذا الحدث عندما ينتهي إخفاء الـ modal عن المستخدم (سينتظر اكتمال انتقالات CSS).
`hidePrevented.bs.modal`	يتم إطلاق هذا الحدث عندما يكون الـ modal ظاهراً، وتكون خلفيته `static` ويتم النقر خارج الـ modal. يتم إطلاق الحدث أيضاً عند الضغط على مفتاح escape ويكون خيار `keyboard` مضبوطاً على `false`.
`show.bs.modal`	يتم إطلاق هذا الحدث فوراً عند استدعاء طريقة النسخة `show`. إذا كان السبب هو نقرة، فإن العنصر الذي تم النقر عليه يكون متاحاً كخاصية `relatedTarget` للحدث.
`shown.bs.modal`	يتم إطلاق هذا الحدث عندما يصبح الـ modal مرئياً للمستخدم (سينتظر اكتمال انتقالات CSS). إذا كان السبب هو نقرة، فإن العنصر الذي تم النقر عليه يكون متاحاً كخاصية `relatedTarget` للحدث.

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})

النافذة المنبثقة (Modal)

كيف يعمل ؟

أمثلة

مكونات النافذة المنبثقة (Modal)

Modal title

عرض توضيحي مباشر

خلفية ثابتة

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

توسيط عمودي

تلميحات الأدوات والـ (popovers)

استخدام الـ (grid)

تغيير محتوى النافذة المنبثقة

التبديل بين عدة نوافذ منبثقة

تغيير الحركة

إزالة الحركة

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

إمكانية الوصول

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

أحجام اختيارية

نافذة Modal بملء الشاشة

الـ (CSS)

المتغيرات (Variables)

متغيرات الـ (Sass)

حلقات الـ (Sass loops)

الاستخدام

عبر سمات البيانات (Via data attributes)

التبديل (Toggle)

الإغلاق (Dismiss)

عبر الـ (JavaScript)

خيارات

الطرق، الأساليب (Methods)

خيارات التمرير

الأحداث (Events)