Inner Popup using Salesforce

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: