title: Modal for clickable table rows in bootstrap
body: <p>I have a 3 rowed table and I want to click on each row and describe more about the content of each in a modal pop out . The problem is when I click on the row the screen will go a bit darker but no pop up shows up </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        $(function(){
            $('#orderModal').modal({
                keyboard : true,
                backdrop : "static",
                show     : false,
            }).on('show', function(){
                var getIdFromRow = $(this).data('orderid');
                //make your ajax call populate items or what even you need
                $(this).find('#orderDetails').html($('&lt;b&gt; Order Id selected: ' + getIdFromRow  + '&lt;/b&gt;'))
            });
  
            $(".table-striped").find('tr[data-target]').on('click', function(){
               //or do your operations here instead of on show of modal to populate values to modal.
                $('#orderModal').data('orderid',$(this).data('id'));
            });
        });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;h1&gt;Orders&lt;/h1&gt;
          &lt;table class="table table-striped"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;ID&lt;/th&gt;
                      &lt;th&gt;Customer&lt;/th&gt;
                      &lt;th&gt;Status&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr data-toggle="modal" data-id="1" data-target="#orderModal"&gt;
                      &lt;td&gt;1&lt;/td&gt;
                      &lt;td&gt;24234234&lt;/td&gt;
                      &lt;td&gt;A&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr data-toggle="modal" data-id="2" data-target="#orderModal"&gt;
                      &lt;td&gt;2&lt;/td&gt;
                      &lt;td&gt;24234234&lt;/td&gt;
                      &lt;td&gt;A&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr data-toggle="modal" data-id="3" data-target="#orderModal"&gt;
                      &lt;td&gt;3&lt;/td&gt;
                      &lt;td&gt;24234234&lt;/td&gt;
                      &lt;td&gt;A&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;x&lt;/button&gt;
                  &lt;h3&gt;Order&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div id="orderDetails" class="modal-body"&gt;&lt;/div&gt;
              &lt;div id="orderItems" class="modal-body"&gt;&lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>