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

Today I was looking for a solution which would work for all browsers of IE. I took the code of @pimvdb and @Ash Clarke along with his comment where he mentioned background-color: black; opacity: 0.8; may also work. For IE it will just be completely black. and came to a solution below:

$("#first-div").prepend("
");

var height1 = $("#first-div").height();
var width1 = $("#first-div").width();

$(".overlay-example").css({
    "background-color": "black",
    "z-index": "9999999",
    "position": "absolute",
    "width": width1,
    "height": height1,
    "display": "none"
}).fadeTo(0, 0.0001);

Tested in IE8, IE9 above. Could not check for IE7. Will be glad to update my soulution in case you find it wrong. (it would help me also to update my solution :))

Thank you @pimvdb and @Ash Clarke

Demo