تمرير البيانات بحدث النافذة | النوافذ الحوارية Modal في بوتستراب 5

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

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

بدلاً من توليد خمسين عنصر .modal مكرراً لكل صف في جدول المستخدمين، أنشئ نافذة حوارية واحدة فقط واقرأ الزر الذي ضغط عليه المستخدم عبر الخاصية event.relatedTarget داخل مستمع الحدث show.bs.modal!

انتبه أمنياً هنا: استخدم دائماً textContent أو input.value لحقن البيانات المقروءة داخل النافذة، ولا تستخدم innerHTML مع نصوص المستخدمين أبداً لتفادي ثغرات DOM XSS.

الصف 2 صورة توضيحية

مخطط تمرير البيانات الديناميكية من الزر المستدعي إلى النافذة عبر حدث show.bs.modal وخاصية relatedTarget

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

HTML

<button class="btn btn-outline-primary" type="button"
  data-bs-toggle="modal" data-bs-target="#msgMdl"
  data-bs-recipient="@sara">Message Sara</button>
<div class="modal fade" id="msgMdl" tabindex="-1">
  <div class="modal-dialog"><div class="modal-content">
    <div class="modal-body">
      <input id="recInput" class="form-control">
    </div>
  </div></div>
</div>

جرّب بنفسك

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

Dynamic Modal Event Data تمرير البيانات بحدث النافذة

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

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