I have a parent visualforce page which has 4 fields  approver_1 , approver_2 , approver_3 and approver_4 which is lookup to user.

I have added a custom button called "InitiateApprovalProcess" in the standard layout of the page
When I click this button it opens as a popup(visualforce page), I have shown the code below where I will enter the field values.
This popup (visualforce page) has save and cancel buttons.

When I click save button it saves the values to the parent, I mean the parent page should get refreshed with the values from the popup.

vf page:
=======
<apex:page standardController="MedConnect__FDA_3500A_MedWatch_Report__c" extensions="VY_InitiateApprovalProcess_Controller" lightningStylesheets="true">
<apex:includeScript value="{!$Resource.MedConnect__jquery}" />
    <apex:includeScript value="{!URLFOR($Resource.MedConnect__jquery_ui,'jquery-ui-1.10.3/ui/minified/jquery-ui.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.MedConnect__jquery_ui,'jquery-ui-1.10.3/themes/base/jquery-ui.css')}"/>
<apex:form >
<apex:pageBlock mode="edit">
<apex:pageBlockSection title="Approvers" id="ApproversId">
    <apex:inputField Id="appId1" html-placeholder="Search People..." value="{!Approver.VY_Approver1__c}" />
    <apex:inputField Id="appId2" html-placeholder="Search People..." value="{!Approver.VY_Approver2__c}" />
    </apex:pageBlockSection>
    <apex:pageBlockSection >
    <apex:inputField Id="appId3" html-placeholder="Search People..." value="{!Approver.VY_Approver3__c}" />
    <apex:inputField Id="appId4" html-placeholder="Search People..." value="{!Approver.VY_Approver4__c}" />
    </apex:pageBlockSection>
    <apex:pageBlockButtons location="bottom" html-align="right">
    <button class="btn" onclick="window.open('/{!$CurrentPage.parameters.id}', target='_self');return false;">Cancel</button>
     <apex:commandButton action="{!customSave}" value="Save" onClick="Window.Close()" onomplete="window.top.location.reload()"/>
     
    </apex:pageBlockButtons>
    </apex:pageBlock>
</apex:form>
    <script language="JavaScript" type="text/javascript">
function CloseAndRefresh(){
window.opener.location.href="/{!$CurrentPage.parameters.ID}";
      self.close();
  }
</script>
</apex:page>

apex controller of poup page
======================
public with sharing class VY_InitiateApprovalProcess_Controller
{
    public id ReportIds;
    public MedConnect__FDA_3500A_MedWatch_Report__c Approver { get; set; }
   
    public VY_InitiateApprovalProcess_Controller(ApexPages.StandardController controller) {
        ReportIds = ApexPages.CurrentPage().getParameters().get('id');
        this.Approver = (MedConnect__FDA_3500A_MedWatch_Report__c)controller.getRecord();
        Approver =[SELECT Id,VY_Approver1__c,VY_Approver2__c,VY_Approver3__c,VY_Approver4__c
                            FROM
                            MedConnect__FDA_3500A_MedWatch_Report__c WHERE Id =:ReportIds];
    }
    public VY_InitiateApprovalProcess_Controller()
    {
        Approver = new MedConnect__FDA_3500A_MedWatch_Report__c();
    }
   
    public PageReference customSave()
    {
        PageReference pr;
        try{
            database.upsert(Approver);
            //closeWindow = true;
            pr = new PageReference('/'+Approver.Id );
        }catch( Exception e ){
            ApexPages.addMessages(e);
        }
        return Null;       
    }}

I require 2 functionalities as follows

a) when user click save the popup page should close and the parent page should be refreshed with the updated field values.

b) when I click cancel button the page should close.

Please help me out with this functionality with working code, I am not very good in javascript.

Thanks
sheila


c)