The most practical way I can think of is to be able to call modal whenever you need it, doing it inside a function where you first collect the data you need and send it back into the modal .
Remove your code from the modal call via the data
attribute:
<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');
}
});
});
In the above code and example below, what is done:
- Attach click event so that when clicking on an element of the page that contains the CSS class
modal-trigger
, certain code is executed;
- We override the default behavior of this element using the
preventDefault()
;
- We collect data from the button using the
.data()
method, in addition we collect a text from the table row where the button is found;
- We checked whether modal is present in the DOM by counting the total elements with the ID of the same, see method
.size()
;
- If there is, we will change the title of the modal and its content with the data received;
- Finally, we call modal using the
.modal('show')
method.
Statements
$(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><linkhref="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><tableclass="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>
Show also in JSFiddle .