A forma mais prática que me ocorre é seres tu a chamar a modal sempre que precisas, fazendo-o dentro de uma função onde primeiro recolhes os dados que precisas e envias os mesmos para dentro da referida modal.
Retira do teu código a chamada da modal via atributo data
:
<a data_toggle="modal"/> <!-- não usar isto, vamos chamar com JavaScript -->
jQuery
$(document).ready(function(){
// anexamos o evento à classe de CSS "modal-trigger"
$('.modal-trigger').on("click", function(e) {
e.preventDefault();
// recolhemos os dados que pretendemos
var $this = $(this),
$modal = $($this.data("target")),
name = $this.data("name"),
action = $this.data("action"),
title = $this.closest("tr").find("td:first-child").html();
// se a markup da modal existe, alteramos o que pretendemos
if ($modal.size()==1) {
$modal.find('#myModalLabel').html("A " + action + " " + title);
$modal.find('.modal-body').html("Hei " + name + ", é para " + action + "?");
// chamamos a modal
$modal.modal('show');
}
});
});
No código em cima e exemplo em baixo, o que é feito:
- Anexar evento de clique para que ao clicar num elemento da página que contenha a classe de CSS
modal-trigger
seja executado determinado código;
- Anulamos o comportamento por defeito desse elemento com uso do método
preventDefault()
;
- Recolhemos dados presentes no botão com recurso ao método
.data()
, adicionalmente recolhemos um texto da linha da tabela onde o botão se encontra;
- Verificamos se a modal está presente no DOM fazendo uma contagem do total de elementos com o ID da mesma, ver método
.size()
;
- Se existe vamos alterar o título da modal e o conteúdo da mesma com os dados recebidos;
- Por fim, chamamos a modal fazendo uso do método
.modal('show')
.
Demonstrações
$(document).ready(function(){
$('.modal-trigger').on("click", function(e) {
e.preventDefault();
var $this = $(this),
$modal = $($this.data("target")),
name = $this.data("name"),
action = $this.data("action"),
title = $this.closest("tr").find("td:first-child").html();
if ($modal.size()==1) {
$modal.find('#myModalLabel').html("A " + action + " " + title);
$modal.find('.modal-body').html("Hei " + name + ", é para " + action + "?");
$modal.modal('show');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<table class="table table-bordered">
<tbody>
<tr>
<td>
Coisas boas na vida
</td>
<td>
<button type="button" class="btn btn-primary btn-sm modal-trigger" data-target="#myModal" data-name="bubu" data-action="Editar">Editar</button>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm modal-trigger" data-target="#myModal" data-name="bubu" data-action="Apagar">Apagar</button>
</td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Fechar</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
<button type="button" class="btn btn-primary">Siga...</button>
</div>
</div>
</div>
</div>
Demonstração também no JSFiddle.
ActionResult
no Controller e exibir uma modal em JS, é isso?