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 notif

Answer 1

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.