<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> <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 class="col-sm-12 "> <div class="result pull-left"><strong>Mostrando 1 até 6 de 5000</strong></div> <ul class="pagination pull-right"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div> </div> <!-- Modal --> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <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> <h1 class="modal-title" id="myModalLabel">TO DO Form</h1> </div> <div class="modal-body"> <form accept-charset="UTF-8" action="" method="post"> <input class="span9" name="name" placeholder="Full Name" type="text"> <input class="span9" name="username" placeholder="Username" type="text"> <input class="span9" name="password" placeholder="Password" type="password"> <button class="btn btn-warning" type="submit">Sign up for WebApp</button> </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" ); }) });