Blur Behaviour for a VF page

Question

I have a VF page as :

Lorem ipsum ..... dummy stuff to show the popup is above content

    <apex:outputPanel id="popup">
        <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
            Lorem ipsum This is the pop up <br/><br/><br/>
            <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="popup"/>
        </apex:outputPanel>
    </apex:outputPanel>

</apex:form>

<style type="text/css">
   .customPopup{
        background-color: white;
        border-style: solid;
        border-width: 2px;
        left: 50%;
        padding:10px;
        position: absolute;
        z-index: 9999;
        /* These are the 3 css properties you will need to tweak so the pop 
        up displays in the center of the screen. First set the width. Then set 
        margin-left to negative half of what the width is. You can also add 
        the height property for a fixed size pop up.*/
        width: 500px;
        margin-left: -250px;
        top:100px;
    }
</style>

And the contoller is: public class popup {

public boolean displayPopup {get; set;}

public void closePopup() {
    displayPopup = false;
}

public void showPopup() {
    displayPopup = true;
}

}

On click on Show pop up button; I need to blur the VF page in the background.

Any ideas / work arounds?

Answer 1

I'd recommend using javascript to 'blur' the parent page. Sometimes we use a loadmask jquery plugin to do something sort of similar.

It's pretty straight forward, and provides a light grey over the parent page when when using a lightbox.

Just call it on the 'body' of the parent page while the lightbox is open:

$('body').mask();