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

you can try

 $("body").append('<div id="overlay" style="background-color:grey;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');

then just use

$("#overlay").remove();

to get rid of it.

quick & dirty.

Answer 2

var modal = $('<div>')
  .dialog({ modal: true });

modal.dialog('widget').hide();

setTimeout(function() { modal.dialog('close'); }, 2000); // to close it

here is a demo: http://jsbin.com/avoyut/3/edit#javascript,html,live

don't forget to call modal.dialog('close'); to end it all!

this way you get the benefits of the actual dialog modal code, resizing, disabling, etc..

hope this helps -ck

Answer 3

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("<div class=\"overlay-example\"></div>");

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

Answer 4

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('<div id="requestOverlay" class="request-overlay"></div>'); /*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*/
                }
            });

Answer 5

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;
}​

Answer 6

You may want to give the user some indication that something is happening, too, not just a blank/gray screen. I would suggest some sort of loading gif, see this, for example.