lightbox as status message

In this demo, i will show you how to create a lightbox or modal window as an status message. This serve for two purposes :

1. Restrict the user from any other operation.
2. Make the user aware that his request is been processed

Salesforce offer this possibility but, it is upto you to make great use of this functionality. By native , what salesforce offer, is not that attractive, but very useful.
example : 

when you click on the "click me" button, a status message appear :

Now I will show you how to use a lightbox as status message which will result in this :

 

1. First instal the following package:https://login.salesforce.com/packaging/installPackage.apexp?p0=04tG0000000Vmg4
2. Then integrate the component in your code, just like below :

<apex:page controller="Demo">
    <apex:form>
        <apex:outputText value="Watch this counter: {!count}" id="counter"/>
        <c:StatusMsg/>
        <apex:commandButton value="click Me" action="{!incrementCounter}" rerender="counter" status="status001" />
    </apex:form>
</apex:page>


here is the sample class, you can try it :

public class Demo {
    Integer count = 0;
                       
    public PageReference incrementCounter() {
            count++;
            return null;
    }
                       
    public Integer getCount() {
        return count;
    }
}

Note : this hightlighted code is very important for it to work.

 If you examine the codes in the component, its not a big deal, its just some javascript and css. The function to make the div visible is called by the onstart and the function to mak the div hidden is called by the onstop attribute.You are free to modify accordingly.

<apex:actionStatus onstart="showMsg('waitmsg',1)" onstop="showMsg('waitmsg',0)" id="status001"/>