Estou usando o modal bootstrap para exibir as informações do membro. Cada membro possui o botão para abrir o modal. Eu tenho este botão em loop:
@foreach($members as $member)
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View Details</button>
@endforeach
Este conteúdo modal:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Member Detail Information</h4>
</div>
<div class="modal-body">
{{$member->name}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Mas toda vez que eu obtenho as informações do último membro. Isso é óbvio, mas eu quero passar $member->IDo botão do botão e exibir seus respectivos detalhes no modal. Como posso conseguir isso?
Você pode usar o dataatributo para passar alguns dados para o modal Bootstrap.
Botões no loop
@foreach()
<a data-toggle="modal" data-id="{{$member->name}}" href="#UserDialog" class="user_dialog">Details</a>
@endforeach
Modelo bootstrap
<div class="modal hide" id="UserDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="user_name" id="user_name" value=""/>
</div>
</div>
E um pouco de JavaScript
$(document).on("click", ".user_dialog", function () {
var UserName = $(this).data('id');
$(".modal-body #user_name").val( UserName );
});
É isso
Pequena demonstração aqui: http://jsfiddle.net/Au9tc/6247/
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras