Hi,

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.

Component:

<aura:component controller="ModalPopupNameLink_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: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">Contacts</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="Vehicle Name">Contact Name</div></th>
                    <th scope="col"><div class="slds-truncate" title="Service Date">Phone</div></th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration items="{!v.mydata}" var="row" indexVar="index">
                    <tr>
                        <th scope="row"><div class="slds-truncate" >
                            <a onclick="{!c.showPopup}" value="{!row}" data-index="{!index}">{!row.Name}</a>
                            </div></th>
                        <td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</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>Contact Details</p>
            </div>
            <div class="slds-modal__content slds-p-around--medium">  
            	<aura:iteration items="{!v.accdata}" var="acc">
                	Contact Name : <ui:outputText value="{!acc.Name}" />
                    <br/><br/>
                    Phone : <ui:outputText value="{!acc.Phone}" />
                </aura:iteration>
            </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 idx = event.target.getAttribute('data-index');
        console.log('idx---->>> ' + idx);
        var rowRecord = component.get("v.mydata")[idx];
        console.log('rowRecord--->>> ' + JSON.stringify(rowRecord));        
        component.set('v.accdata',rowRecord);
    },
    
    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:

public class ModalPopupNameLink_TaskSvrController {
	
    @AuraEnabled
    public static List<Contact> fetchAcc (){
        return [SELECT Id, Name, Phone FROM Contact LIMIT 50];
    }
}

Screenshots:

1.


2.




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​