كيفية عمل صفحة منبثفة باستخدام bootstrap؟

أذا كنت تستعمل Bootstrap فهناك شئ اسمه Modal يقوم بفتح نافذة منبثقة عند الضغط على زر معين مثلا
هذا مثال إذا كنت تستخدم Bootstrap 5 تقوم بعمل زر وتعطيه attribute يسمى data-bs-target وقيمته هو العنصر الخاص بالModal حيث أنه عند الضغط على الزر يفتح ال 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <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>

طبعا أنت في حالتك ستقوم أولاً بتحويل الوسم من a إلى button ثم تعدل الكود بما يتناسب معك.
لمعرفة المزيد عن ال Modal يمكنك البحث هنا: https://getbootstrap.com/docs/5.0/components/modal/
أو إذا كنت تستخدم الاصدار الرابع من Bootstrap: https://getbootstrap.com/docs/4.0/components/modal/

بتاريخ 2 دقائق مضت قال عبدالله أحمد4:

أذا كنت تستعمل Bootstrap فهناك شئ اسمه Modal يقوم بفتح نافذة منبثقة عند الضغط على زر معين مثلا
هذا مثال إذا كنت تستخدم Bootstrap 5 تقوم بعمل زر وتعطيه attribute يسمى data-bs-target وقيمته هو العنصر الخاص بالModal حيث أنه عند الضغط على الزر يفتح ال 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <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>

طبعا أنت في حالتك ستقوم أولاً بتحويل الوسم من a إلى button ثم تعدل الكود بما يتناسب معك.
لمعرفة المزيد عن ال Modal يمكنك البحث هنا: https://getbootstrap.com/docs/5.0/components/modal/
أو إذا كنت تستخدم الاصدار الرابع من Bootstrap: https://getbootstrap.com/docs/5.0/components/modal/

استعمل الاصدار 4 لاكن هل يتغير php ام لا ؟؟؟

ستقوم بوضع كود ال form الخاص بعملية الدفع داخل ال div الذي له كلاس modal-body
كما بهذا الكود

<!-- 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- هنا كود ال 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">Save changes</button>
      </div>
    </div>
  </div>
</div>

بتاريخ 4 دقائق مضت قال عبدالله أحمد4:

ستقوم بوضع كود ال form الخاص بعملية الدفع داخل ال div الذي له كلاس modal-body
كما بهذا الكود

<!-- 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- هنا كود ال 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">Save changes</button>
      </div>
    </div>
  </div>
</div>

 

أضع كود الفورم فقط بدون تغيير شي؟ لان الفورم جاهز مثل مافي الصورة في الاعلى

بتاريخ 20 ساعات قال Reda Boukheche:

أضع كود الفورم فقط بدون تغيير شي؟ لان الفورم جاهز مثل مافي الصورة في الاعلى

نعم، يجب أن تقوم بوضع النموذج الخاص بك في جسم الـ modal، وبالبطع يمكنك أن تقوم بتعديل باقي أكواد الـ modal حسب الحاجة.

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

يمكنك الإطلاع أكثر حول ajax من خلال هذه المقالة (مُقدّمة إلى AJAX والكائنات المُؤجّلة (Deferred Objects) على jQuery - jQuery - أكاديمية حسوب (hsoub.com)) أو من خلال موسوعة حسوب من هنا