Hi niranjan please find this below example, to give you an idea how to achive this using modal and inner soql query (https://developer.salesforce.com/forums/?id=906F0000000g0q6IAA)in the controller

Component

<aura:component controller="accWithContController">
    
    <aura:attribute name="AccountList" type="Account[]" description="Stores account with contacts"/>
    
    
    
  <div aria-hidden="false" id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open" style="display:none;">
   <div class="slds-modal__container">
     <div class="slds-modal__header">
      
      <h2 id="header43" class="slds-text-heading--medium">Add New Record.</h2>
      <button class="slds-button slds-button--neutral" onclick="{!c.hideModal}">X</button>  
     </div>
    <div class="slds-modal__content slds-p-around--medium">
      <div>
         <ul>
      <aura:iteration items="{!v.AccountList}" var="acc">
         <li type="dice">AccountName : {!acc.Name}</li>
         <ul>
            <aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
               <li>contact {!index + 1} Name : {!con.LastName}</li>
            </aura:iteration>
         </ul>
         <hr/>
      </aura:iteration>
   </ul>
      </div>
    </div>
      <div class="slds-x-small-buttons--horizontal">
        <p> footer</p>
      </div>
  </div>
     
 </div>
       <button class="slds-button slds-button--neutral" onclick="{!c.showModal}">Open Modal</button>
        
    
</aura:component>

Client Controller

({
	
    showModal : function(component, event, helper) {
    
        
        var action = component.get('c.fetchAccount');
  action.setCallback(this, function(response) {
   //store state of response
   var state = response.getState();
   if (state === "SUCCESS") {
    //set response value in ListOfAccount attribute on component.
    component.set('v.AccountList', response.getReturnValue());
   }
  });
  $A.enqueueAction(action);
   document.getElementById("newClientSectionId").style.display = "block"; 
    },
    
    hideModal : function(component,event, helper){
    
       document.getElementById("newClientSectionId").style.display = "none" ;
   }
})

Apex Class Controller:

public class accWithContController {
 @AuraEnabled
 public static list < Account > fetchAccount() {
  // query 10 records from account with their relevant contacts and return query.
  List < Account > lstOfAcc = [select Name, AnnualRevenue, BillingState, (select LastName from contacts) from Account LIMIT 10];
  return lstOfAcc;
 }
}

Applicaiton To Test:

<aura:application extends="force:slds" >
    <c:onclickPopUp/>
	
</aura:application>

​If this helps out, please choose this as best answer.

Thank you!