مشغلات فتح وإغلاق النافذة | النوافذ الحوارية Modal في بوتستراب 5

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لتشغيل نافذة حوارية تصريحياً، اربط زراً يحمل السمتين data-bs-toggle="modal" وdata-bs-target="#modalId" بمعرّف النافذة. ولإغلاقها من الداخل، ضع السمة data-bs-dismiss="modal" على أيقونة .btn-close في الرأس وعلى زر الإلغاء في التذييل.

الصف 2 كود برمجي

HTML

<button class="btn btn-danger" type="button"
  data-bs-toggle="modal" data-bs-target="#delModal">
  Delete Key</button>
<div class="modal fade" id="delModal" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">
      Confirm</h5><button class="btn-close"
      data-bs-dismiss="modal"></button></div>
    <div class="modal-body">Revoke API token?</div>
  </div></div>
</div>

جرّب بنفسك

الصف 3 ملاحظة هامة

Modal Triggers and Dismiss مشغلات فتح وإغلاق النافذة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (النوافذ الحوارية Modal في بوتستراب 5)