Jquery - How to disable the entire page

Question

I have this ajax event

function save_response_with_ajax(t){
  var form = $(\'#edit_\'+t);
  var div = $(\'#loading_\'+t);
  $.ajax({
    url: form.attr(\"act         


        

Answer 1

This is the complete solution which I am using:

Following are the sections:

1. CSS for overlay. "fixed" is used to cover whole page content, not just screen height and widths. You can use background color or gif

2. Attaches to "beforeSend" event of jQuery Ajax call. Creates the overlay on demand and shows it.

3. Upon completion of request, it removes the overlay from DOM

CSS:

.request-overlay {
    z-index: 9999;
    position: fixed; /*Important to cover the screen in case of scolling content*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    background: rgba(200,200,200,0.5) url('../../Images/submit-ajax-loader.gif') no-repeat center; /*.gif file or just div with message etc. however you like*/
}

JavaScript:

$.ajax({
                url: '/*your url*/',
                beforeSend: function () {
                    $('body').append('
'); /*Create overlay on demand*/
                    $("#requestOverlay").show();/*Show overlay*/
                },
                success: function (data) {
                    /*actions on success*/
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    /*actions on error*/
                complete: function () {
                    $("#requestOverlay").remove();/*Remove overlay*/
                }
            });