<apex:page controller="AccountContactPopupC" tabStyle="Account" >
    
    <apex:form id="frm">
        <div id="formid">
            <apex:outputPanel id="tstpopup">
                <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}" />
                <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}" >
                    <apex:pageBlock title="My Content" mode="edit">
                        
                        <apex:pageBlockSection title="My Content Section" columns="1">
                            <apex:outputField value="{!con.Name}"/>                            
                            <apex:inputText value="{!contact.firstName}"/>                            
                            <apex:inputText value="{!contact.lastName}"/>                                 
                        </apex:pageBlockSection>
                        <apex:pageBlockButtons >
                            <apex:commandButton value="Save" action="{!updateContact}" >
                                <apex:param name="con1" assignTo="{!con.Id}" value="con1" />
                            </apex:commandButton>
                        </apex:pageBlockButtons>
                    </apex:pageBlock>
                    <apex:commandButton value="Close" action="{!closePopup}" reRender="tstpopup" />
                    
                </apex:outputPanel>
            </apex:outputPanel>
            
            <apex:pageBlock title="Accounts" >
                <apex:pageBlockTable value="{!accnt}" var="ac" >
                    <apex:column id="two">
                        <apex:commandButton 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:pageBlockTable>
            </apex:pageBlock>
        </div>
    </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;
        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>

public class AccountContactPopupC {
    
    public boolean displayPopup {get; set;}
    public String accid {get;set;}
    
    public List<Account> accnt {get;set;}
    public Account con {get;set;} 
    public Contact contact {get;set;}
    public List<Contact> acnt;
    
    public AccountContactPopupC() {
        accnt = [SELECT Id, Name, AccountNumber, Type, Rating, Phone FROM Account LIMIT 100];
        contact = new Contact();
        con = new Account();
        acnt = new List<Contact>();
    }
    
    public void closePopup() {
        displayPopup = false;
    }
    
    public void showPopup() {
        displayPopup = true;
        con = [SELECT Id, Name, Phone, (SELECT firstName, lastName FROM Contacts) FROM Account WHERE Id = :accid];
    }
    
    public void updateContact(){
        contact.AccountId = con.Id;
        acnt.add(contact);
        System.debug('acnt-> ' + acnt);
        upsert acnt;  
        closePopup();
    }
}