Cannot scroll on page after modal closes

Question

I have a modal to update data. When the update is complete the modal closes and I cannot scroll on the page afterwards.

modal

<div id="catupdate" 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">

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

 </div>
</div>

javascript

$(document).off('click','.updatecat');
 $(document).on('click','.updatecat',function(){
    $('#cat-update').ajaxSubmit({ 
        dataType:'json',
        success:function(response){
            if(response.type == 'success'){
                $(this).hide();
                //$('#catupdate').modal('hide');
                $('.modal-backdrop').remove()
                $('#taba4').trigger('click');  
            }else{
                alert(response.message);
            }
            alert("Category Updated");
            console.log(response);

        }
    })

 });

controller

public function updatecat(Request $request){
    try{
            $type ='success';

            $message ='Successfully Updated';

        $post = $request->all();
        //$user = Auth::user()['id'];
        $cat = Category:: findorFail($post['id']);
        $cat->category = $request->input('category');
        $cat->save();
    }catch(Exception $e){
        $type ='error';
        $message = $e->getMessage();
        }

        echo json_encode(['type'=>$type,'message'=>$message]);

    }

I don't know what is happening. I have used the same modal and script elsewhere and it works fine there.

Answer 1

add below line in your onclick

$('body').removeClass('modal-open');