<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <div class="container"> <div class="alert alert-info"> <a id="fullscreen" href="#fullscreen" class="alert-link"><strong>Click here</strong></a> to view this snippet in an iframe. <i class="fa fa-info-circle fa-2x pull-right"></i> </div> <h1> <i class="fa fa-shopping-cart"></i> Produtos <small> - click on product for details</small> <a href="http://bootsnipp.com/alisonpedro/snippets/Q60Oj" class="btn btn-danger pull-right hide" id="back-to-bootsnipp">Back to Bootsnipp</a></h1> <hr> <table class="table table-hover"> <thead> <tr> <th>#Cod</th> <th>Name</th> <th>Manufacturers</th> <th>Model</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Dell 18.5 Inch Monitor</td> <td>Dell</td> <td>IN1930</td> </tr> <tr> <td>2</td> <td>Intel Core i5</td> <td>Intel</td> <td>Core i5</td> </tr> <tr> <td>3</td> <td >Gaming Keyboard G510</td> <td>Logitech</td> <td>G510</td> </tr> </tbody> </table> </div> <!-- Modal --> <div class="modal" 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" aria-hidden="true"><i class="text-danger fa fa-times"></i></button> <h4 class="modal-title" id="myModalLabel"><i class="text-muted fa fa-shopping-cart"></i> <strong>02051</strong> - Nome do Produto </h4> </div> <div class="modal-body"> <form role="form"> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="first_name" id="first_name" class="form-control input-sm" placeholder="First Name"> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="text" name="last_name" id="last_name" class="form-control input-sm" placeholder="Last Name"> </div> </div> </div> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-sm" placeholder="Email Address"> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-sm" placeholder="Password"> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="form-group"> <input type="password" name="password_confirmation" id="password_confirmation" class="form-control input-sm" placeholder="Confirm Password"> </div> </div> </div> <input type="submit" value="Register" class="btn btn-info btn-block"> </form> </div> </div> </div> </div> <!-- fim Modal-->

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); tbody > tr { cursor: pointer; } .result{ margin-top:20px; }

$(function () { /* BOOTSNIPP FULLSCREEN FIX */ if (window.location == window.parent.location) { $('#back-to-bootsnipp').removeClass('hide'); $('.alert').addClass('hide'); } $('#fullscreen').on('click', function(event) { event.preventDefault(); window.parent.location = "http://bootsnipp.com/iframe/Q60Oj"; }); $('tbody > tr').on('click', function(event) { event.preventDefault(); $('#myModal').modal('show'); }) $('.btn-mais-info').on('click', function(event) { $( '.open_info' ).toggleClass( "hide" ); }) });