Hi Teena,

I trust you are doing very well.

Below is the sample code which I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

If you click on Show PopUp button, related contacts (from server controller) will display in Popup box.

Component:

<aura:component controller="ModalPopup_TaskSvrController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
	
    <aura:attribute name="PageHeading" type="String" default="MODAL POPUP" />
    <aura:attribute name="mydata" type="List"/>
    <aura:attribute name="accdata" type="List"/>
    <aura:attribute name="mydata1" type="List"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    
    <div class="slds-m-top--xx-large">
    	<div class="slds-page-header">
    		<div class="slds-align--absolute-center">
        		<div class="slds-text-heading--large">       
    				{!v.PageHeading}
                </div>
        	</div>
    	</div>
    </div>
    <br/> <br/>
    
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade">
      		<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span>
  		</h3>
        <br/>
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                    <th scope="col"><div class="slds-truncate" title="Add" aura:id="selectAll"></div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata}" var="row" indexVar="index">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!row.Name}">{!row.Name}</div></th>
                        <td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td>
                        <td>
                            <div>                           
                                <lightning:button label="Show PopUp"
                                                  value="{!row}"
                                                  name="{!index}"
                                                  iconName="utility:new_window"
                                                  iconPosition="left"
                                                  variant="brand"
                                                  onclick="{!c.showPopup}"
                                                />
                            </div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
    </div>
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
    	<div class="slds-modal__container" style="width: 40%;">
        	<div class="slds-modal__header">
            	<p>Account Details</p>
            </div>
            <div class="slds-modal__content slds-p-around--medium">  
            	<!--<aura:iteration items="{!v.accdata}" var="acc">
                	Account Name : <ui:outputText value="{!acc.Name}" />
                    <br/><br/>
                    Phone : <ui:outputText value="{!acc.Phone}" />
                </aura:iteration>-->
                
                <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
            <thead>
                <tr class="slds-text-heading--label">
                    <th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                    <th scope="col"><div class="slds-truncate" title="Add" aura:id="selectAll"></div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata1}" var="row1" indexVar="index">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!row1.Name}">{!row1.Name}</div></th>
                        <td><div class="slds-truncate" title="{!row1.Phone}">{!row1.Phone}</div></td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
                
            </div>
            <div class="slds-modal__footer">
            	<lightning:button label="close" onclick="{!c.closeModal}" />
            </div>
        </div>
    </div>
</aura:component>

Controller:

({
	doinit : function(component, event, helper) {
		var action = component.get('c.fetchAcc');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
	},
    
    showPopup : function(component, event, helper){
        var cmpTarget = component.find('Modalbox');
		var cmpBack = component.find('Modalbackdrop');
		$A.util.addClass(cmpTarget, 'slds-fade-in-open');
		$A.util.addClass(cmpBack, 'slds-backdrop--open'); 
        
        var rowRecord = event.getSource().get('v.value');
        console.log('rowRecord--->>> ' + JSON.stringify(rowRecord));        
        //component.set('v.accdata',rowRecord);
        
        var action = component.get('c.fetchCon');
        action.setParams({rid : rowRecord.Id});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata1', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    closeModal : function(component, event, helper){
        var cmpTarget = component.find('Modalbox');
		var cmpBack = component.find('Modalbackdrop');
		$A.util.removeClass(cmpBack,'slds-backdrop--open');
		$A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    }
})

CSS:

.THIS {
}

.THIS .slds-section__title{
    background-color: YellowGreen;
    color: white
}
.THIS .slds-modal__header{
    background-color: OliveDrab;
    color: white
}

Apex Controller:

public class ModalPopup_TaskSvrController {
	
    @AuraEnabled
    public static List<Account> fetchAcc (){
        return [SELECT Id, Name, Phone FROM Account LIMIT 50];
    }
    
    @AuraEnabled
    public static List<Contact> fetchCon (String rid){
        return [SELECT Id, Name, Phone FROM Contact WHERE accountId=:rid];
    }
}

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas