Displaying A section as a Popup in a visulaforce.
when we need to display a popup in visulaforce, used to create a new Vf page with required content to display in popup and that page being opened as a popup page on some event in the page.
But if we need to open a section/Pageblock of a VF page as a popup,How can we do it?
I am using this below code to display the pageblock(Yellow marked) as a popup page.
I have a button(Red Marked) in the page as "Create New lead" and displaying a popup on click of that button, DIsplaying yellow marked Pageblock as a popup. I have used controller method to set showPopup as True on Click of the create a New Lead button and rerendering the section to display popup, and all
Code snippet for Popup
<apex:form >
<apex:sectionHeader title="Create a new Lead"/>
<div style="text-align:center">
<apex:commandButton value="Create New Lead" action="{!showPopup}" rerender="tstpopup" />
</div>
<apex:outputPanel id="tstpopup">
<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
<apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
<!-- This pageblock being open as Popup-->
<apex:pageBlock >
<apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"/>
<apex:commandButton value="Cancel" action="{!closePopup}" rerender="tstpopup" immediate="true"/>
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:inputField value="{!leadToCreate.FirstName}" required="true"/>
<apex:inputField value="{!leadToCreate.LastName}"/>
<apex:inputField value="{!leadToCreate.email}" required="true"/>
<apex:inputField value="{!leadToCreate.phone}" required="true"/>
<apex:inputField value="{!leadToCreate.company}"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:outputPanel>
</apex:outputPanel>
</apex:form>
Style sheet used in this page:
<style type="text/css">
.custPopup{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
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>
Controller logic:
public class LeadConsoleController{
public boolean displayPopup {get; set;}
public void closePopup() {
//to ignore required fiedl
displayPopup = false;
}
public void showPopup() {
displayPopup = true;
}
public lead leadToCreate{get;set;}
public LeadConsoleController(){
leadToCreate = new lead();
}
public void save(){
leadToCreate.ownerId = userinfo.getUserId();
leadToCreate.status='Open - Not Contacted';
insert leadToCreate;
closePopup();
}
}
