PopUp Box To Save Record in Visualforce page

Controller Code :-

public class saveaccountshowrecord {
public account acc{get;set;}
public account acc1{get;set;}
public list<account> acclist2{get; set;}
public string userid{get; set;}
public list<account> acclist3{get; set;}

public saveaccountshowrecord (){
acc= new account();
userid = Apexpages.currentPage().getParameters().get('id');
acclist3=[select name,site,annualrevenue, createddate, description,Email_Id__c from account order by createddate desc];



}


    public void saveinfo(){
    string tempid;
    
    account acclist= new account();
    acclist.name=acc.name;
    acclist.site=acc.site;
    acclist.annualrevenue=acc.annualrevenue;
    acclist.description=acc.description;
    acclist.Email_Id__c=acc.Email_Id__c;

   insert acclist;


        acclist3=[select name,site,annualrevenue, createddate, description,Email_Id__c from account order by createddate desc];



}


public pagereference showrecord(){


return null;


}



}

Visualforce Page :-

<apex:page sidebar="false" controller="saveaccountshowrecord" id="refresh">

        <style>
        .hideBox
        {
        diplay:none;
        visibility:hidden;
        border:6px solid DeepSkyBlue ;
        box-shadow: 0px 0px 10px #888888;
        position:absolute;
        top:50px;
        left:200px;
        }
        </style>

    <apex:form >
        <apex:pageBlock title="Save Account and Show Records">
        
     <apex:pageBlockButtons >
     
           
         
           
            <apex:commandButton title="ShowBox"  value="Show Box" onclick="showmydiv()"  reRender="efg"/><br/>
            </apex:pageBlockButtons>  
         
         
         <apex:outputPanel id="refresh">
           
           <apex:pageBlockTable value="{!acclist3}" var="acc">
               <apex:column headerValue="Account Name">
                   <apex:outputField value="{!acc.name}"/>
               </apex:column>
               
               <apex:column headerValue="Account Site">
                   <apex:outputField value="{!acc.Site}"/>
               </apex:column>
               
              
             
               
               <apex:column headerValue="Account Site">
                   <apex:outputField value="{!acc.Email_Id__c }"/>
               </apex:column>
               
               
           </apex:pageBlockTable>
                    
            </apex:outputPanel>
         
            
        
       <div id="mybox" class="hideBox" >
       <apex:pageBlock >
       
           <apex:pageBlockButtons >
                <apex:commandButton action="{!saveinfo}" value="Save Record" onclick="Hidemydiv()" reRender="refresh"/>
                <apex:commandButton title="Hide Box"  value="Hide Box" onclick="Hidemydiv()" reRender="abc"/><br/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="Save Record">
                <apex:inputField value="{!acc.name}"/>
                <apex:inputField value="{!acc.site}"/>
                <apex:inputField value="{!acc.annualrevenue}"/>
                <apex:inputField value="{!acc.description}"/>
                <apex:inputField value="{!acc.Email_Id__c}"/>
            </apex:pageBlockSection>
            </apex:pageBlock>
       </div>
              
        </apex:pageBlock>
    </apex:form>
        <script language="javascript">
        function showmydiv() {
        document.getElementById('mybox').style.visibility= 'visible';
        }
        function Hidemydiv() {
document.getElementById('mybox').style.visibility= 'hidden';
}
        
</script>

</apex:page>

Oupput Screen 1 :-

Oupput Screen 2 :-

Oupput Screen 3 :-