Question

64

Jquery - How to disable the entire page

rated 0 times [ 69] [ 5] / answers: 1 / hits: 78935 / 12 Years ago, thu, february 23, 2012, 12:00:00

I have this ajax event

function save_response_with_ajax(t){

  var form = $('#edit_'+t);

  var div = $('#loading_'+t);

  $.ajax({

    url: form.attr(action), 

    type: POST,    

    data: form.serialize(), 

    cache: false,

    beforeSend: function(){

      form.hide();

      div.show();

    },

    complete: function(){

      div.hide();

      form.show();

    },

    success: function (result) {

    }       

  });

}

And everything works fine, but I want to add (if it's possible) the hability of turning the entire page (the content/body) into gray while before/complete ajax events, like if it were a modal (like this http://jqueryui.com/demos/dialog/#modal but without the dialog)

Is there a way of doing this?

Thanks in advance

Javier Q.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cassies

Add To Favorites

Follow

Total Points: 112

Total Questions: 99

Total Answers: 96

Location: Mexico

Member since Sun, Jul 25, 2021

3 Years ago

answered 12 Years ago mireyag · Accepted Answer

A way of doing this is having an overlay element which fills the entire page. If the overlay element has a semi-transparent background color, it grays out the page completely: http://jsfiddle.net/SQdP8/1/.

Give it a high z-index so that it's on top of all other elements. That way, it renders correctly, and it catches all events (and won't pass them through).

#overlay {

    background-color: rgba(0, 0, 0, 0.8);

    z-index: 999;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    display: none;

}