Modal for clickable table rows in bootstrap

问题

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script>
      $(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($('<b> Order Id selected: ' + getIdFromRow  + '</b>'))
          });

          $(".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'));
          });
      });
  </script>
</head>
<body>
<div class="container">
    <h1>Orders</h1>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Customer</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr data-toggle="modal" data-id="1" data-target="#orderModal">
                    <td>1</td>
                    <td>24234234</td>
                    <td>A</td>
                </tr>
                <tr data-toggle="modal" data-id="2" data-target="#orderModal">
                    <td>2</td>
                    <td>24234234</td>
                    <td>A</td>
                </tr>
                <tr data-toggle="modal" data-id="3" data-target="#orderModal">
                    <td>3</td>
                    <td>24234234</td>
                    <td>A</td>
                </tr>
            </tbody>
        </table>
        <div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h3>Order</h3>
            </div>
            <div id="orderDetails" class="modal-body"></div>
            <div id="orderItems" class="modal-body"></div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</body>
</html>

回答1:

The reason is that you're probably using the newest bootstrap and an old HTML modal format.

Your modal should include <div class="modal-dialog"> and <div class="modal-content"> elements. Also, there's no more hide class in the actual version of bootstrap

<div id="orderModal" class="modal fade" role="dialog" aria-labelledby="orderModal" 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">x</button>
        <h3>Order</h3>
      </div>
      <div id="orderDetails" class="modal-body"></div>
      <div id="orderItems" class="modal-body"></div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>
  </div>
</div>

Another thing is the show event, which should be on('show.bs.modal'), not on.('show')

DEMO

来源：https://stackoverflow.com/questions/37421631/modal-for-clickable-table-rows-in-bootstrap

标签

javascript

jquery

html

twitter-bootstrap

bootstrap-modal