Bootstrap Snippet Product list with details in modal pop-up using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
tbody > tr {
    cursor: pointer;
}
.result{
    margin-top:20px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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" );
    })
    
     
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Product list with details in modal pop-up"
Bootstrap 3.1.0 Snippet by alisonpedro

Related: See More

Questions / Comments:

"Product list with details in modal pop-up" Bootstrap 3.1.0 Snippet by alisonpedro

Related: See More

Questions / Comments:

"Product list with details in modal pop-up"
Bootstrap 3.1.0 Snippet by alisonpedro