Modal data target ve id tanımlama

rephp7 1243 gün önce

822 defa görüntülendi

<td><?php
echo mb_substr(stripslashes($yazilar[$i]["alan1"]), 0, 150, "UTF-8") . " <br>..."; ?><br>
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#editor<?= $yazilar[$i]["alan1"]; ?>">
<i class="far fa-eye"></button></td>
</td>

<td><?php
echo mb_substr(stripslashes($yazilar[$i]["alan2"]), 0, 150, "UTF-8") . " <br>..."; ?><br>
<button type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#danisman<?= $yazilar[$i]["yontem2"]; ?>">
<i class="far fa-eye"></button></td>
</td>

Yukardaki gibi önizlemesini görmek istediğim alanlara birer buton tanımladım ve data-target ile aşağıdaki modal ın id alanını aynı yapıp modal içinde göstertiyorum.

 <!-- modal -->
  <div class="modal fade" id="editor<?= $yazilar[$i]["alan1"]; ?>">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
        <h4 class="modal-title">Önizleme Penceresi</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ///veri çek php kodu ///
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
<!-- /.modal -->

bu kısımı nasıl düzeltmeliyim ki
data-toggle="modal" data-target="
her modal-target için ayrı birer modal yazmayayım
<div class="modal fade" id="

muthbeats

1243 gün önce

Merhabalar kullanıp kullanmadığını bilmiyorum fakat sana jquery ile yardımcı olabilirim.

öncelikle butonlardan

data-toggle="modal" ve data-target=""

kısımlarını kaldırmalısın.
sonrasında ise bütün butonlara bir class atayabilirsin örneğin "showModalBtn" olsun classımız.
aynı zamanda her butona açmak istediğimiz veri kaydının id'sini data-yaziid şeklinde verelim

Butonlarımızın Son Hali:

    <button type="button" class="btn btn-success btn-xs showModalBtn" data-yaziid="<?= $yazilar[$i]["id"]; ?>">

Modal'ı 1 kere ekleyip modal-body kısmına bir id verelim.

<div class="modal-body" id="modalBody">

</div>

sonrasında ise javascript kısmına geçelim:

$("body").on('click', '.showModalBtn', function(){
   var id = $(this).data('yaziid');
   $.ajax({
       method: "get",
       url: '[BURAYA URL GELECEK]', // Yazıları çekeceğimiz adres
       data: {
           id: id
       },
       success: function(data){
           $("#modalBody").html(data);
       }
   })
})

PHP kısmında ise GET ile yazının idsini alıp sadece echo ile içeriği döndürebilirsin.

#006180

Soru detay sayfasını görüntüle