Search
Twitter

Using Apex and Visualforce to create a modal popup in Salesforce.com

When I first started developing applications for Salesforce.com I came from a web development background. On my first project I found it necessary to create a nice popup window to show the user some feedback. I was used to doing this through the "hidden div" method in my former life. I'm a create of habbit and therefore began to look for a similar way to accomplish this in Salesforce.com. The main problem that I had was that I needed to launch the popup window when the user clicked a Visualforce button. After doing some research I found out that this was possible. 

 

Here are the steps to create a modal popup through Apex/Visualforce:

Step 1 - Login to your Salesforce.com develer account
Step 2 - Click "Setup" in the upper right corner
Step 3 - Under the App Setup section (left menu), expand Develop
Step 4 - Click on Apex Classes
Step 5 - Click the "New" button to create a new Apex Class
Step 6 - Add the following source and click the "Save" button. (we'll walk through what this does in a moment). Download full tstpopup Class source

 

public class tstpopup {     

    public boolean displayPopup {get; set;}     
    
    public void closePopup() {        
        displayPopup = false;    
    }     
    public void showPopup() {        
        displayPopup = true;    
    }
    
  }

 

Step 7 - Click on Pages (below Apex Classes on the left menu)
Step 8 - Create a new Visualforce page by clicking the "New" button
Step 9 - For the purpose of this tutorial I used "tstpopup" for my Label & Name
Step 10 - Enter the Visualforce Markup code below and click "Save" (we'll walk through what it all means in a moment). Download full tstpopup Visualforce Markup source

<apex:page controller="tstpopup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General.
        </apex:pageBlock>
 
        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                This is where I would put whatever information I needed to show to my end user.<br/><br/><br/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 
    </apex:form>
 
    <style type="text/css">
        .custPopup{
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            padding:10px;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup
            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 add
            the height property for a fixed size pop up if you want.*/
            width: 500px;
            margin-left: -250px;
            top:100px;
        }
        .popupBackground{
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;
        }

    </style>
</apex:page>

Step 11 - Now, to view the finished page, you'll need to go up to the browser address bar and navigate to the apex directory in your Salesforce.com account and type in the page name. For me, that is the following:

https://na3.salesforce.com/apex/tstpopup

Here is the page that comes up: 

Visualforce page created

After clicking on the button, our popup is displayed.  

Visualforce/Apex modal popup