javascript - disable all page elements with modal feature using jquery

Question

I wish to disable all page elements upon an action. Like the modal feature that is in the JQuery UI.

Like on an ajax action.. I wish to show a notification and at the same time to enable the modal feature. And after the request, need to re-enable the page elements back.

Is there any option available in core jquery for that or any plugins?

Answer 1

The page elements are not disabled - doing that would be quite tedious - but rather, a semi-transparent div is overlayed on top of all other page elements. To do this, you would probably do something like

// Declare this variable in the same scope as the ajax complete function
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');

And the CSS:

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
  background: url('link/to/semitransparent.png');
}

Then once the action is complete, you simply remove it like this:

overlay.remove();

No need to include jQuery UI if this is the only thing you need it for.