student-admission/resources/views/supervisor/layouts/modal.blade.php

<div class="modal fade" id="modal_page" aria-hidden="true" aria-labelledby="exampleModalLabel" tabindex="-1">
  <div class="modal-dialog modal-lg">
      <!-- Modal content-->
      <div class="modal-content">
          <div class="modal-header" style="background-color: #141639c4; color: white;">
              <h6 class="modal-title" id="exampleModalLabel" style="font-weight: bold !important; margin-left: 10px;"></h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" style="background-color: #8492a33d !important;"></div>
          
      </div>
  </div>
</div>
 

 
<script>  
//Start of jquery
function wait_me(selector, config=null){

  if(config){

    selector.waitMe(config);

  }else{

    selector.waitMe({
      effect: 'facebook',
      //color: '#000',
      text: 'Please! Wait ...'
    });

  }

}

$(function(){   
   
    $('#modal_page').on('submit', '.ajax-form', function(event){

        event.preventDefault();
        ajax_form(this, function(form){

          var replace_content=$(form).find('input[name=replace_content]').val();

          if(replace_content){

            url=$(form).find("input[name='replace_content']").data('replace');

            $(replace_content).waitMe({
              effect: 'facebook',
              text: 'Please! Wait ...'
            });
                          
            $(replace_content).load(url, null, function(){

              $(replace_content).waitMe('hide');

            });

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

          }else window.location.reload();

        });

        });
    $(document).on('click', '.open_modal_page', function(){ 
        let url=$(this).data('url');  
        let title=$(this).data('title'); 
        if(!title) title='Modal Form'; 
        $('.modal-title').html(title); 
        //$('#modal_page').modal({show:true});

        let open_modal = new bootstrap.Modal('#modal_page', {
          keyboard: false
        });

        open_modal.show(); 
        $('.modal-body').load(url, null, function(){ 
          $('.tooltips').tooltip();
        });

    }); 
   
  $('.tooltips').tooltip();

  $('#modal_page').on('show.bs.modal', function(e){
      $('.modal-body').html("<h1 class='text-center mt-3'><i class='fa fa-refresh fa-spin fa-2x'></i></h1>");
  });

  $('#modal_page').on('hidden.bs.modal', function (e){
      $('.modal-body').empty();
  });

 

});
//End of jquery
</script>