11

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?

viMaL
  • 638
  • 1
  • 7
  • 20
  • 2
    You should consider if that really is your desired behavior. Doing that would come close to setting the ajax request to synchronous, which ends up in a pretty bad user experience. – jAndy Sep 09 '10 at 08:01
  • 1
    Block UI http://malsup.com/jquery/block/ – Primary Key Sep 09 '10 at 08:19

4 Answers4

25

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.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
  • To solve the Tab issue, handle the tab keydown event and check if you're on the first/last control. See lines 23-83 and 143-153 in gist.github.com/0d04646ab6cf4df50610 – Sam Hasler Jan 10 '13 at 15:05
  • I'm not worried about tab. I put up an alert box, cover the screen with the semi-transparent div, and fully expect the user to see and have emphasized the message in the alert box. The message was presented in a dramatic manner that can not be missed. If the user chooses the circumvent the message (unlikely), I'm not really concerned, as there also has to be server-side validation. If the user circumvents the message and clicks the un-clickable, nothing will happen. They HAVE been WARNED. – UncaAlby Mar 05 '13 at 21:25
8

One easy way to achieve this is to define a css class like this:

.dark-class
{
   background-color: #F0F0F0;
   filter:alpha(opacity=50); /* IE */
   opacity: 0.5; /* Safari, Opera */
   -moz-opacity:0.50; /* FireFox */
   z-index: 20;
   background-repeat:no-repeat;
   background-position:center;
   width: 100%;
   height: 100%;
   position:absolute;
   top: 0px;
   left: 0px;
}

Use jQuery to add this class to an empty div that is the first child of the body element. Remove the class to disable modal mode.

Your notification should have a z-index higher than the z-index of the dark-class. All items that need to be disabled must have a lower z-index.

kgiannakakis
  • 103,016
  • 27
  • 158
  • 194
6

I like Jiang's idea but you do not need image with the following overlay style sheet.

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    filter: alpha(opacity=80);
    z-index:50;
}
Jonas T
  • 2,989
  • 4
  • 32
  • 43
1

Try adding a style of "pointer-events: none;" to the body. To remove it use pointer-events: auto;

More info here https://css-tricks.com/almanac/properties/p/pointer-events/ Though there may be issues with earlier browsers not supporting it

Nate Hammond
  • 56
  • 5