引导程序中可点击表格行的模态

Question

我有一个3行的表格，我想单击每一行，并以模式弹出的方式详细描述每行的内容。 问题是当我单击该行时，屏幕会变暗一些，但没有弹出窗口显示

<!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>

Answer 1

原因是您可能正在使用最新的引导程序和旧的HTML模式格式。

您的模态应包含<div class="modal-dialog">和<div class="modal-content">元素。 另外，在实际版本的引导程序中没有更多的hide类

<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>

另一件事是show事件，该事件应该是on('show.bs.modal')而不是on.('show')

演示

引导程序中可点击表格行的模态

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-24 19:15:43

引导程序中可点击表格行的模态

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-24 19:15:43

解决方案1
1 已采纳 2016-05-24 19:15:43