Her veri için modal çoğaltmak pek mantıklı değil gibi
Tercih ettiğim yapı:
Butonumuza data-id atarız:
<button data-id="{{ $item->id }}" data-toggle="modal" data-target="#showModal" class="btn btn-primary btn-sm">Göster</button>Modal kodumuz
<div class="modal fade" id="showModal" tabindex="-1" role="dialog" aria-labelledby="showModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="showModal">Hesap Bilgisi</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="account_info">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>Ve bu açılan modal'a veri aktaran javascript kodumuz:
<script>
$(function () {
$("#showModal").on('shown.bs.modal', function (event) {
const button = $(event.relatedTarget);
const btn_id = button.data('id');
$.ajax({
type:'POST',
url:'/url-adresin',
data:{id:btn_id},
success:function(data){
$('#account_info').html(data.account_info);
}
});
});
$('#showModal').on('hide.bs.modal', function () {
$('#account_info').html('Yükleniyor...');
})
})
</script>