Modal for clickable table rows in bootstrap
<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>