<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <table class="table table-striped table-bordered"> <thead> <tr> <th>Nº Pedido</th> <th>Cliente</th> <th>Valor Total</th> <th>#</th> </tr> </thead> <tbody> <!-- iteração --> <tr> <td>1321</td> <td>Guilherme Rocio</td> <td>R$ 831,00</td> <td><button data-pedido="1321" data-toggle="modal" data-target="#pedidoModal" class="btn btn-primary"><i class="glyphicon glyphicon-plus"></i></button></td> </tr> <!-- fim iteração--> </tbody> </table> <div class="modal fade" id="pedidoModal" tabindex="-1" role="dialog" aria-labelledby="pedidoModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">Visualizando Pedido</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

(function ($) { $('#pedidoModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); var pedido = button.data('pedido'); var modal = $(this); modal.find('.modal-title').text('Visualizando Pedido #' + pedido); modal.find('.modal-body').html('<div class="alert alert-info" role="alert">Carregando informações do Pedido ... </div>'); // simulando ajax setTimeout(function () { modal.find('.modal-body').html("Informações do meu pedido: " + pedido); }, 2000); }); })(jQuery);