Inner Popup using Salesforce

Visualforce page:

<apex:page controller=”showAll” >
<apex:form >
<!–    CSS Style    –>
<style type = “text/css”>

.headr
{
font-size:17px;
font-weight:bold;
color:maroon;
}

.popup
{
background-color: white;
border-width: 2px;
border-style: solid;
z-index: 9999;
left: 50%;
padding:10px;
position: absolute;
width: 500px;
height:60%;
margin-left: -250px;
top: 25px;
overflow:scroll;
}
   
.popupBg
{
background-color:black;
opacity: 0.20;
filter: alpha(opacity = 70);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}

</style>
<!–    End of CSS Style    –>


<apex:pageblock >
<table cellspacing = “7” cellpadding = “7”>
<tr>
<td><apex:commandLink styleClass=”headr” action=”{!members}” reRender=”members”>Members</apex:commandLink></td>
</tr>
<tr>
<td><apex:commandLink styleClass=”headr” action=”{!blogs}” reRender=”blogs”>Blogs</apex:commandLink></td>
</tr>
<tr>
<td><apex:commandLink styleClass=”headr” action=”{!photos}” reRender=”photos”>Photos</apex:commandLink></td>
</tr>
</table>
</apex:pageblock>
<apex:outputPanel id=”members”>
<apex:outputPanel styleClass=”popupBg” layout=”block” rendered=”{!displayPopUp}”>
       <apex:outputPanel styleClass=”popup” layout=”block” rendered=”{!displayPopUp}”>
       <apex:pageblock title=”Members” >
        <apex:pageBlockTable value=”{!memb}” var=”mem”>
        <apex:column value=”{!mem.Name}”/>
        <apex:column value=”{!mem.E_Mail_Id__c}”/>
        <apex:column value=”{!mem.Mobile_Number__c}”/>
        </apex:pageBlockTable>
        <apex:pageBlockButtons location=”bottom”>
        <apex:commandButton value=”Ok” action=”{!closePopup}”/>
        </apex:pageBlockButtons>
        </apex:pageblock>
</apex:outputPanel>
</apex:outputPanel>
</apex:outputPanel>

<apex:outputPanel id=”blogs”>
<apex:outputPanel styleClass=”popupBg” layout=”block” rendered=”{!displayPopUp}”>
       <apex:outputPanel styleClass=”popup” layout=”block” rendered=”{!displayPopUp}”>
       <apex:pageblock title=”Blogs” >
        <apex:pageBlockTable value=”{!blog}” var=”blg”>
        <apex:column value=”{!blg.Name}”/>
        <apex:column value=”{!blg.URL__c}”/>
        </apex:pageBlockTable>
        <apex:pageBlockButtons location=”bottom”>
        <apex:commandButton value=”Ok” action=”{!closePopup}”/>
        </apex:pageBlockButtons>
        </apex:pageblock>
</apex:outputPanel>
</apex:outputPanel>
</apex:outputPanel>

<apex:outputPanel id=”photos”>
<apex:outputPanel styleClass=”popupBg” layout=”block” rendered=”{!displayPopUp}”>
       <apex:outputPanel styleClass=”popup” layout=”block” rendered=”{!displayPopUp}”>
       <apex:pageblock title=”Photos” >
        <apex:pageBlockTable value=”{!photo}” var=”pht”>
        <apex:column value=”{!pht.Name}”/>
        <apex:column value=”{!pht.ID}”/>
        </apex:pageBlockTable>
        <apex:pageBlockButtons location=”bottom”>
        <apex:commandButton value=”Ok” action=”{!closePopup}”/>
        </apex:pageBlockButtons>
        </apex:pageblock>
</apex:outputPanel>
</apex:outputPanel>
</apex:outputPanel>

</apex:form>
</apex:page>

Apex:


public class showAll
{
    public boolean displayPopup {get; set;}
    public List<Member__c> memb {get;set;}
    public List<Blog__c> blog {get;set;}
    public List<Photo__c> photo {get;set;}
 
    public showAll()
    {
    displayPopup = false;
    }
 
    public void members()
    {
    displayPopup = true;
    String sql = ‘SELECT Name,E_Mail_Id__c,Mobile_Number__c FROM Member__c’;
    memb = Database.Query(sql);
    }
 
    public void blogs()
    {
    displayPopup = true;
    String sql = ‘SELECT Name,URL__c FROM Blog__c’;
    blog = Database.Query(sql);
    }  
 
    public void photos()
    {
    displayPopup = true;
    String sql = ‘SELECT Name,ID FROM Photo__c’;
    photo = Database.Query(sql);
    }
 
    public void closePopup()
    {
    displayPopup = false;    
    }
}

Output:




Leave a Reply