Display Contacts in popup window

Open developer console and create a class and named as contactCtrl

 

  public class contactCtrl {
     @AuraEnabled
    public static List getMyContacts(){
        return [select id,name,firstname,lastname from contact limit 30] ;
        
    }
} 

Create a new component in developer console

 

    <aura:component controller="contactCtrl" >
    
    
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <aura:attribute name="getConFromJs" type="Contact" default="{ 'sobjectType': 'Contact' }"/>
    
    <button class="slds-button slds-button--neutral" onclick="{!c.dispMyCons}" >getMyList</button> 
            
    
    
<aura:if isTrue="{!v.isOpen}">
      
        <div role="dialog" tabindex="-1" aria-labelledby="header2" class="slds-modal slds-fade-in-open " style="width: 50rem;" >
        <div class="slds-modal__container">
    <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
          <div class="slds-modal__header">
            <button class="slds-button slds-modal__close slds-button_destructive" title="Close" onclick="{!c.closeModel}">
            X
            <span class="slds-assistive-text">Close</span>
            </button>
            <h2 id="header99" class="slds-text-heading--medium">Lead Notifications</h2>
          </div>         
        
<!--###### MODAL BOX BODY Part Start From Here ######-->
          <div class="slds-table_edit_container slds-is-relative slds-scrollable" >
             <table class="slds-table slds-table_edit slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols slds-no-cell-focus" role="grid" style="width: 40rem;">
                  <thead>
                      <tr class="slds-line-height_reset">
                      <th class="slds-is-sortable slds-is-resizable slds-text-title_caps" scope="col" style="width: 8.75rem;">
                       
                            <span class="slds-truncate" title="id">id</span>
                           
                       </th>
                      <th class="slds-is-sortable slds-is-resizable slds-text-title_caps" scope="col" style="width: 15.75rem;">
                       
                            <span class="slds-truncate" title="FirstName">FirstName</span>
                           
                       </th>
                      </tr>     
                  </thead>
                   <tbody>
                      <aura:iteration items="{!v.getConFromJs}" var="con" indexVar="index">
                                                 
                          <tr style="width: 2.75rem;">
                        <td class="slds-truncate"> {!con.Id}  </td>
                        <td class="slds-truncate"> {!con.FirstName}  </td>
                            
                    </tr>
                    
 
                       </aura:iteration>
                  </tbody>
              </table>
              
          </div> 
 
            
        </div>
      </div>
      <div class="slds-backdrop slds-backdrop--open"></div>
      </aura:if> 
 
</aura:component> 

Now, create a JS controller

 

({
    dispMyCons : function(component, event, helper) {
                        
        var action=component.get("c.getMyContacts")
        action.setCallback(this,function(a){
            component.set("v.getConFromJs",a.getReturnValue());
            
        });
        $A.enqueueAction(action);
        component.set("v.isOpen",true);
            },
    
   closeModel: function(component, event, helper) {

     component.set("v.isOpen",false); 
  
    }
})

Create a new application and copy paste the below code

 

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

Click on Preview button (right side plane of the console) to see the output