Twitter Bootstrap Question posted in

opening a modal using datatable-Twitter bootstrap

I’m so confused what the problem in my code is. I’ve already tried this
working code but it doesn’t work for me.

I’ve also already tried 'toggle' and that doesn’t work either.

This is my code:

$(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>
Tags:

2

Answers


  1. 0

    The code works fine. Just fix markup of the table and make sure the Bootstrap components are included to your page.

    $(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>
    Login or Signup to reply.
  2. 0

    It seems to work on my end. You have to display tr a row where the user could click and show the modal.

    Here added on your code <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search