Bootstrap模态不会在提交时关闭

I added a Bootstrap modal to my page. Here is the code of modal div:

<div class="modal fade" id="myModal<?php echo $kategori['C_ID'];?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $kategori['C_ID'];?>">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel<?php echo $kategori['C_ID'];?>">Perditeso</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="id">ID</label>
          <input type="text" class="form-control" id="id<?php echo $kategori['C_ID'];?>" value="<?php echo $kategori['C_ID'];?>">
        </div>
        <div class="form-group">
          <label for="newname">Kategoria</label>
          <input type="text" class="form-control" id="newname<?php echo $kategori['C_ID'];?>" value="<?php echo $kategori['C_Name'];?>">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Mbyll</button>
        <button type="button" onclick="catupdate('<?php echo $kategori['C_ID'];?>')" class="btn btn-primary">Ruaj ndryshimet</button>
      </div>
    </div>
  </div>
</div>

and the catupdate function:

function catupdate(id){
  var dataString="fshij=" + id;
  $.ajax({
    type:"post",
    url:"../functions/query.php",
    data:dataString,
    cache:false,
    success: function(html){
      $('#del').html(html);
    }
  });
  return false;
}

The function runs correctly and completes the action but it doesn't close Modal automatically. In this case i'm tryint to edit datas there. PHP codes are okay.

You should close the modal programmatically after the click using :

$('[id^="myModal"]').modal('hide');
//OR
$('.modal').modal('hide');

Inside success function or in the beginning of your function catupdate to, e.g :

success: function(html){
   $('.modal').modal('hide');
   $('#del').html(html);
}

Hope this helps.

Use the following syntax to hide a modal:

$('#modalID').modal('hide');

So, in your code:

function catupdate(id){
 var dataString="fshij=" + id;
  $.ajax({
    type:"post",
    url:"../functions/query.php",
    data:dataString,
    cache:false,
    success: function(html){
      $('#del').html(html);
      $('.modal:visible').modal('hide');
    }
  });
 return false;
}