Visualforce Pop up
One of the most common request you will see when perusing the Visualforce discussion boards is that developers want some sort of pop up box to display or gather more information. Due to the way Visualforce works a traditional pop up box won’t always work as this is a separate window and the state of one controller/extensions can not be accessed from two different windows. Each new window gets a new instance of the controller.
The most commonly recommended way to address this is issue is to use a modal dialog box similar to this or this. These work great but sticking to my anti javascript 100% native Visualforce mantra I assumed there must be an alternative to incorporating external javascript libraries. These libraries can add really cool and polished features but usually at the expense of more complexity and potentially higher maintenance.
I decided to take a stab at creating a 100% native Visualforce pop up and I’m pretty happy with the results. You can check out the demo here:
http://tehnrd-developer-edition.na7.force.com/popup
I’ll be the first to say this method is not perfect. The pop up may not always display in the exact center of the screen as it does not inspect the window size to dynamically center the pop up. Even with this limitation it tends to work pretty good 90% of the time. EDIT: css has been updated below and this is no longer an issue.
This code and markup is pretty simple so I didn’t add a lot of comments but if you have any questions please leave a comment below.
First lets take a look at the page.
<apex:page controller="popup"> <apex:form > <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/> <apex:pageBlock > Lorem ipsum ..... dummy stuff to show the popup is above content </apex:pageBlock> <apex:outputPanel id="popup"> <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}"> Lorem ipsum <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> </apex:page>
And the controller, very simple.
public class popup { public boolean displayPopup {get; set;} public void closePopup() { displayPopup = false; } public void showPopup() { displayPopup = true; } }
Great post! I incorporated this into a project today: http://www.youtube.com/watch?v=3Ae_9SqXPF0&fmt=22
Thanks!
Thanks for the comment Steve, cool video. Based on the feedback in this thread, http://community.salesforce.com/sforce/board/message?board.id=Visualforce&thread.id=15646, I have made some tweaks to the css so the pop up scales to the height of the content.
For more of that pop feel here are some ways you could add a drop shadow, http://phoenity.com/newtedge/drop_shadow/.
Great post, Jason. Is there a way to disable the rest of the page or somehow grey it out?
Great idea:) I do love a simple solution.
Thanks for all the great feedback. I have made some enhancements to the css above so the pop up should be centered no matter what the screen width is.
Rajesh,
To disable the rest of the page the “correct” way would require custom javascript and this is where it can get messy fast. The main reason is that you need to dynamically set the height and width of the background div based on the document size but there is not a consistent way to do this across all browsers *cough*IE*cough*. You also need to use javascript DOM scripting to insert this div directly beneath the page tag so it blocks the entire screen. Here easier but not exactly the best solution that may work.
Add this directly beneath the id=”popup” panel:
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>And then add this to your css:
.popupBackground{
background-color:black;
opacity: 0.20;
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}
Thank for explane the functionality is very comprensible. Greetings
Thanks for this! I’m currently putting together a Campaign activity tool that is made SO much easier by the inclusion of these pop-up windows. However, in one of the windows, I’m using for a date/time field and, for some reason, the label is rendering, but the input fields aren’t.
Would you know if this has anything to do with the architecture of the pop-up windows?
Thanks, again, for your examples.
Andy
Hey Andy,
I think I have supplied the solution here: http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=16279&jump=true#M16279
Jason,
Thank you so much for this. This works great.
I have seen your posts on SF community boards and you always have been helpful.
Thanks again.
-VJ
Jason,
Are u won with passing the value form popup to parent page without using java script on 100% native Visualforce.
like in your popup there is inputtext in which in we can enter the value then we click the button and we can get that inputtex value in parent page.
please through some lights on this
Thanks
Amar
hay jason,
its done man….
Thanks for the popup blog from your blog i inspire to move it to ahead for my requirements….
Thanks a Lot
Amar
Admin Edit: Clean up posts because code wasn’t showing.
i think its not show the visualforce page code
for code check the bellow link
http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=16568&jump=true#M16568
This doesn’t appear to work if you have a field that’s required.
apex:pageBlockSectionItem >
Sorry, I cut the code off…using OpportunityLineItem as the standardController with a controller extension
Any ideas???
Hi,
Good work. Useful.
Anyone tried in IE ?