function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Khan AnasKhan Anas 

Display Account details on Modal Popup in Visualforce

Hi all,

I am new to Visualforce. I want to display Account records, then when we click on the name, a popup box (Modal Popup only) should be opened displaying the name and phone number.

Below is my code.
  
<apex:page standardController="Account" recordSetVar="accnt" tabStyle="Account" >  
    <script type="text/javascript">
        var popupbox = new SimpleDialog("Test", true);
        popupbox = createDialog();
    	function OpenPopup(){
            popupbox.setTitle("Account Detail");
            popupbox.importContentNode(document.getElement.Id("{!$Component.popupbox}"));
            popupbox.show();
 		}
    	OpenPopup();
	</script>
    <apex:form >
    <apex:outputPanel style="display:none">
    	<apex:outputPanel id="popupbox" layout="block">
        	<p>Click OK to Cancel...</p>
        	<apex:commandButton value="Ok" onClick="popupbox.hide()" />
    	</apex:outputPanel>
	</apex:outputPanel>
 
    	<apex:pageBlock title="Accounts" >
         	<apex:pageBlockTable value="{!accnt}" var="ac" >
                <apex:column id="two">
                	<apex:commandButton value="Click" onclick="OpenPopup();" reRender="two"/>
                </apex:column>
            	<apex:column value="{!ac.Name}" />
                <apex:column value="{!ac.AccountNumber}" />
                <apex:column value="{!ac.Type}" />
                <apex:column value="{!ac.Rating}" />
                <apex:column value="{!ac.Phone}" />
                <apex:column value="{!ac.billingCity}" />
                <apex:column value="{!ac.billingCountry}" />
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Popup is not showing up and I don't understand how to display records on a popup. Please help me. Thanks.
Best Answer chosen by Khan Anas
sfdcMonkey.comsfdcMonkey.com
Hi, for this you have need to create apex class extension for vf page and update your vf page with below code :

first create apex class : 
public class popupExt {
    public string accId {get;set;}
    Public account popUpAcc  {get; set;}     
    public boolean displayPopup {get; set;}     
    
    
    public popupExt(ApexPages.StandardSetController  stdController) {
    }
    
    public void closePopup() {        
        displayPopup = false;     
    }     
    
    public void showPopup() {        
        displayPopup = true; 
       
        popUpAcc = [select id,Name,Phone,AccountNumber,Type,Rating,billingCity,billingCountry from account where id =: accId ];
        
    }
    
  }

vf page : 
<apex:page standardController="Account" extensions="popupExt" recordSetVar="accnt" tabStyle="Account"  >  
  
    <apex:form >
        <apex:outputPanel id="tstpopup">
            <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                    <p>Account Name : {!popUpAcc.Name}</p>
                    <p>Phone : {!popUpAcc.Phone}</p>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 
    	<apex:pageBlock title="Accounts" >
         	<apex:pageBlockTable value="{!accnt}" var="ac" >
                <apex:column id="two">
                	<apex:commandButton title="{!ac.id}" value="Click" action="{!showPopup}" rerender="tstpopup">
                        <apex:param name="accId" value="{!ac.id}" assignTo="{!accId}"/>
                    </apex:commandButton>
                </apex:column>
            	<apex:column value="{!ac.Name}" />
                <apex:column value="{!ac.AccountNumber}" />
                <apex:column value="{!ac.Type}" />
                <apex:column value="{!ac.Rating}" />
                <apex:column value="{!ac.Phone}" />
                <apex:column value="{!ac.billingCity}" />
                <apex:column value="{!ac.billingCountry}" />
            </apex:pageBlockTable>
        </apex:pageBlock>
    </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>

Output :
User-added image​​

i hope it helps you.
  kindly Let me inform if it helps you and close your query by choosing best answer if you got your right answer so it can helps others
thanks 
sfdcmonkey.com 

All Answers

sfdcMonkey.comsfdcMonkey.com
Hi, for this you have need to create apex class extension for vf page and update your vf page with below code :

first create apex class : 
public class popupExt {
    public string accId {get;set;}
    Public account popUpAcc  {get; set;}     
    public boolean displayPopup {get; set;}     
    
    
    public popupExt(ApexPages.StandardSetController  stdController) {
    }
    
    public void closePopup() {        
        displayPopup = false;     
    }     
    
    public void showPopup() {        
        displayPopup = true; 
       
        popUpAcc = [select id,Name,Phone,AccountNumber,Type,Rating,billingCity,billingCountry from account where id =: accId ];
        
    }
    
  }

vf page : 
<apex:page standardController="Account" extensions="popupExt" recordSetVar="accnt" tabStyle="Account"  >  
  
    <apex:form >
        <apex:outputPanel id="tstpopup">
            <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                    <p>Account Name : {!popUpAcc.Name}</p>
                    <p>Phone : {!popUpAcc.Phone}</p>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>
            </apex:outputPanel>
        </apex:outputPanel>
 
    	<apex:pageBlock title="Accounts" >
         	<apex:pageBlockTable value="{!accnt}" var="ac" >
                <apex:column id="two">
                	<apex:commandButton title="{!ac.id}" value="Click" action="{!showPopup}" rerender="tstpopup">
                        <apex:param name="accId" value="{!ac.id}" assignTo="{!accId}"/>
                    </apex:commandButton>
                </apex:column>
            	<apex:column value="{!ac.Name}" />
                <apex:column value="{!ac.AccountNumber}" />
                <apex:column value="{!ac.Type}" />
                <apex:column value="{!ac.Rating}" />
                <apex:column value="{!ac.Phone}" />
                <apex:column value="{!ac.billingCity}" />
                <apex:column value="{!ac.billingCountry}" />
            </apex:pageBlockTable>
        </apex:pageBlock>
    </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>

Output :
User-added image​​

i hope it helps you.
  kindly Let me inform if it helps you and close your query by choosing best answer if you got your right answer so it can helps others
thanks 
sfdcmonkey.com 
This was selected as the best answer
Khan AnasKhan Anas
Hi Piyush,
Awesome :) Thanks for the detailed solution. Helps a lot! 

If I want to achieve this objective through JavaScript then what modifications I have to make in my code? I will be highly obliged for your help. 
sfdcMonkey.comsfdcMonkey.com
Hi  Anas,
  kindly close this query with choosing best answer and regading javaScript version please put a new query on forums with your code so everyone can take a look into it :)
Thanks
Khan AnasKhan Anas
Ok! Thank you so much for your help :)