Aynı sayfada birden çok modal eklemek kod fazlalığına yol açar. Bunun yerine JQuery & AJAX append ve data attribute’ini kullanarak bir modal ekleyip diğerini silebiliriz. Siz de çok basit bir şekilde jquery & ajax ile dinamik modal oluşturabilirsiniz.

Dinamik olarak ( Örnek : id ye göre ) modal açmak istiyorsanız paylaşacağım kod örneklerini kullanabilirsiniz.

Projenize JQuery kütüphanesini dahil etmeyi unutmayın.

<!-- HTML kısımdaki modalı açacağımız buton -->
<!-- "data-id" attribute içine PHP ile id yi yazdırın. -->
<button data-id="1" class="open_modal"></button>
<script>
$("body").on("click", ".open_modal", function (button) {
  var id=$(this).data('id'); // data-attr içindeki id yi aldık.
  $.ajax({
   type: 'POST',
   url: 'modal.php', // veriyi&modalı alacağımız yol
   data: {id:id}, // id parametremizi yolladık
   dataType:'JSON', //veriyi json olarak alacağız
   error: function (hata) {
     console.log(hata);
   },
   success: function (data) {
    console.log(data); //testiniz bittikten sonra başına slash ekleyebilirsiniz. 
    try {                  
      $("#my_modal").remove(); // Eski modal varsa sildik
      $("body").append(data.modal); // yeni modalı ekledik
      button.preventDefault();
      $('#my_modal').modal({
        autofocus: false
      }).modal('show');
    } catch (e) {
     console.log(e + "data:" + data);
    }

   }
  });
});
</script>

modal.php

<?php 

$id=$_POST['id'];
$sql='SELECT * FROM table WHERE id = $id';

$data['modal']='
 <div id="my_modal" class="modal fade" style="display:none">
   <div class="modal-content">
     <div class="modal-header">
       <h5>Sipariş Ver</h5>
         <form action="" method="POST">
          <input type"number" name="piece">
          <input type="text" disabled value="'.$sql["price"].'">
          <button type="submit">Sipariş Ver</button>
         </form>
      </div>
    </div>
  </div>';

echo json_encode($data);

Örnek sipariş oluştururken fiyatı dinamik olarak modal içine çekip, adet girdirmek için verilmiştir.

Kendi Modal Style ‘ ınıza göre değiştirip kullanabilirsiniz. Sadece küçük bir örnek gösterilmiştir.

İşleyiş mantığı jquery ajax ile php sayfamıza id yi post atıp, bu php sayfamıza json_encode edip echo ile basıyoruz. Bu sayfaya gelen jquery bunu okuyup body e append ile ekliyor. sonrasında da yine jquery içinde modal ı açıyoruz.

Bu jquery dinamik modal örneğini kolaylıkla e-ticaret, ürün detayı listeleme, quick view ( hızlı gösterim index ) gibi alanlarda kullanabilirsiniz.