Modal bootstrap does not appear when button clicks

1
<!DOCTYPE html>
<html lang="pt-pt">
    <head>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/dataTables.bootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/css/dataTables.bootstrap.min.css"/>
        <script type="text/javascript" src="jquery-3.2.1.js"></script>
        <link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"/>
        <script type="text/javascript" src="./DataTables/datatables.min.js"></script>
        <script type="text/javascript">
            $(document).ready(

                function () {
                    $('button').click(function(event)
                    {
                        event.preventDefault();
                        var modal = $('#myModal').modal('show');
                        modal.on('show.bs.modal', function (event){
                        var t = $('table').DataTable( { ajax: 
                          {
                              url:'<?php echo "ajax.php";?>',
                              data : { 'tabela' : 'dados'},
                              type:'json',
                              method : 'POST',
                              success : function(dado)
                              {
                                  t.rows.add(dado).draw(true);
                              }
                          }
                        }); 
                    });


                   });
                }
            );
        </script>
    </head>
    <body>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <table id="tbmd">

                    <thead>
                        <tr>
                            <th>coluna 1</th>
                            <th>coluna 2</th>
                            <th>coluna 3</th>
                        </tr>
                    </thead>

                </table>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
        <table id="tb">

                    <thead>
                        <tr>
                            <th>coluna 1.1</th>
                            <th>coluna 2.2</th>
                            <th>coluna 3.3</th>
                        </tr>
                    </thead>

                </table>
    </body>
</html>

modal does not appear. The import are in the directories that are correct.

    
asked by anonymous 31.10.2017 / 16:51

1 answer

0

Try changing from:

<link rel="stylesheet" type="text/css" href="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"/>

To:

<script type="text/javascript" src="./DataTables/DataTables-1.10.16/js/bootstrap.min.js"></script>
    
31.10.2017 / 18:31