Question

我很困惑我的代码中的问题是什么。我已经尝试过this working code，但对我来说不起作用。

我也已经尝试过'toggle'，但这也不起作用。

这是我的代码：

$(document).ready(function() {
  $('#example').on('click', 'tr', function() {
    $("#inbox_modal").modal('show');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<table id="example" class="table table-bordered inbox" style="width:100%">
  <div class="modal fade" id="inbox_modal" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content modal-form">
        <div class="modal-header">
          <h4 class="modal-title">Example</h4>
          <a data-dismiss="modal" style="cursor: pointer">&times;</a>
        </div>
        <div class="modal-body">
          <p>POP UP ME!!!</p>
        </div>
      </div>
    </div>
  </div>

Answer 1

代码工作正常。只需修复表的标记，并确保Bootstrap组件包含在页面中即可。

$(document).ready(function() {
  $('#example').on('click', 'tr', function() {
    $("#inbox_modal").modal('show');
  });
});

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>

 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>

<table id="example" class="table table-bordered inbox">
  <tbody>
    <tr>
      <td>Click</td>
      <td>here</td>
      <td>please</td>
    </tr>
  </tbody>
</table>
<div class="modal fade" id="inbox_modal" role="dialog">
  <div class="modal-dialog modal-lg">
    <!-- Modal content-->
    <div class="modal-content modal-form">
      <div class="modal-header">
        <h4 class="modal-title">Example</h4>
        <a data-dismiss="modal" style="cursor: pointer">&times;</a>
      </div>
      <div class="modal-body">
        <p>POP UP ME!!!</p>
      </div>
    </div>
  </div>
</div>

Answer 2

这似乎对我有效。您必须在用户可以单击并显示模式的行上显示tr。

已在您的代码<td><tr><tr></td>

上添加了

$(document).ready(function() {
  $('#example').on('click', 'tr', function() {
    $("#inbox_modal").modal('show');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />

<table id="example" class="table table-bordered inbox" style="width:100%">
  <tr><td><td></tr>
  <div class="modal fade" id="inbox_modal" role="dialog">
    <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content modal-form">
        <div class="modal-header">
          <h4 class="modal-title">Example</h4>
          <a data-dismiss="modal" style="cursor: pointer">&times;</a>
        </div>
        <div class="modal-body">
          <p>POP UP ME!!!</p>
        </div>
      </div>
    </div>
  </div>
</table>

使用数据表打开模式

2 个答案: