Javascript 引导模式'；不显示

我已经使用bootstrap modal version 3.3.7（参考

）创建了ajax代码来显示详细信息，它运行良好

但是当我想用bootstrap4实现它时，我遇到了一个问题，当单击“process”时，没有响应，模式也没有出现

<div class="container">
    <h2> Proses Penerimaan Siswa Baru </h2>
    <table id="tablee" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th> ID PSB </th>
                <th> Nama </th>
                <th> Sekolah Asal </th>
                <th> Kelas </th>
                <th> Tahun Pelajaran </th>
                <th> Action </th>
            </tr>
        </thead>
        <tbody>
            <?php
                $sql="SELECT * FROM psbsmp";
                $resultset=mysqli_query($connection,$sql) or die(mysqli_error());
                while ($rows=mysqli_fetch_array($resultset)){
                ?>
                <tr id="<?php echo $rows['id']; ?>">
                <td data-target="idpsb"><?php echo $rows["idpsb"]; ?></td>
                <td data-target="nama"><?php echo $rows["nama"]; ?></td>
                <td> <?php echo $rows["sekolahasal"]; ?></td>
                <td> <?php echo $rows["kelas"]; ?></td>
                <td> <?php echo $rows["tahunmasuk"]; ?></td>
                <td><a href="#" data-role="update" data-id="<?php echo $rows['id'] ;?>">Process</a></td>
                </tr>
                <?php
                }
                ?>
        </tbody>
    </table>

---

它是否与我使用的按钮的功能有关？is

元素？

这里是工作模式的简单示例，请检查应用程序中的引导4链接和模式的html内容

启动演示模式
情态标题
&时代；
...
接近
保存更改

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

        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">PROSES PENERIMAAN {Data Calon Siswa}</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                <div class="row">
                    <div class="col-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label">ID PSB</label>
                            <input class="form-control" type="text" id="idpsb" name="idpsb" disabled>

                        </div> 
                    </div>  
                    <div class="col-6 col-sm-6 col-md-6">   
                        <div class="form-group">
                            <label class="control-label"> ID SISWA </label>
                            <input class="form-control" type="text" id="idsiswa" name="idsiswa" >
                        </div>
                    </div>  
                  </div>
                <div class="row">
                    <div class="col-8 col-sm-8 col-md-8">
                        <div class="form-group">
                            <label class="control-label">NAMA</label>
                            <input class="form-control" type="text" id="nama" name="nama" disabled>
                        </div>
                    </div>
                    <div class="col-4 col-sm-4 col-md-4 ">
                        <div class="form-group">
                            <label class="control-label">NISN</label>
                            <input class="form-control" type="text" id="nisn" name="nisn">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label">BEASISWA</label>
                            <input class="form-control" type="text" id="beasiswa" name="beasiswa">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label">PENERIMAAN</label>
                            <select class="form-control" name="keterangan" id="keterangan">
                            <option value="0"> Please Select </option>
                            <option value="lulus"> Lulus</option>
                            <option value="lulus bersyarat"> Lulus Bersyarat</option>
                            <option value="tidak lulus"> Tidak Lulus</option>
                            </select>
                        </div>
                        <input type="hidden" id="userId" class="form-control">
                    </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
                <a href="#" id="save" class="btn btn-primary pull-right">Process</a>
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            </div>

        </div>

    </div>

 $(document).ready(function(){
    //  append values in input fields
      $(document).on('click','a[data-role=update]',function(){
            var id  = $(this).data('id');
            var idpsb  = $('#'+id).children('td[data-target=idpsb]').text();
            var nama  = $('#'+id).children('td[data-target=nama]').text();

            $('#idpsb').val(idpsb);
            $('#nama').val(nama);

            $('#userId').val(id);
            $('#myModal').modal('toggle');
      });

      // now create event to get data from fields and update in database 

       $('#save').click(function(){
          var id  = $('#userId').val(); 
         var idpsb =  $('#idpsb').val();
          var nama =  $('#nama').val();


          $.ajax({
              url      : 'connection.php',
              method   : 'post', 
              data     : {idpsb : idpsb , nama : nama , id : id},
              success  : function(response){
                            // now update user record in table 
                             $('#'+id).children('td[data-target=idpsb]').text(idpsb);
                             $('#'+id).children('td[data-target=nama]').text(nama);

                             $('#myModal').modal('toggle'); 

                         }
          });
       });
  });

use css to display modal in your javascript


          $.ajax({
              url      : 'connection.php',
              method   : 'post', 
              data     : {idpsb : idpsb , nama : nama , id : id},
              success  : function(response){
                            // now update user record in table 
                             $('#'+id).children('td[data-target=idpsb]').text(idpsb);
                             $('#'+id).children('td[data-target=nama]').text(nama);

                             $('#myModal').css('display','block');

                         }
          });