BeerSearchData.cmp
____________________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="recordList" type="List"/>
    <aura:attribute name="iden" type="String"/>
     <lightning:overlayLibrary aura:id="overlayLib"/>
    <div class="c-container">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
            <aura:iteration items="{!v.recordList}" var="con">
                <lightning:layoutItem size="4" padding="around-small">
                    <div class="custom-box">
                        <lightning:card title="{!con.Beer_Name__c}"  iconName="custom:custom56" >
                            Alcohol % : {!con.Alcohol__c}&nbsp;
                            Price : {!con.Price__c}
                            <div class="slds-col slds-size_4-of-8">
                                <img src="{!$Resource.BeerImage}"/>
                            </div>
<aura:set attribute="actions">
<lightning:button name="{!con.Id}" label="View Details" onclick="{!c.detailspage}" variant="brand"/>
</aura:set>
                        </lightning:card>
                    </div>
                </lightning:layoutItem>
            </aura:iteration>
        </lightning:layout>
    </div>
    <div>
    </div>
</aura:component>

BeerSearchDataController.js
________________________

({
    detailspage : function(component, event, helper) {
    var eventSource = event.getSource();
       var beerObj = eventSource.get('v.name');
        component.set('v.iden',beerObj);
        component.set('v.truthy',true);
         $A.createComponent(
             "c:BeerDetails",
            {
                "v.iden": "beerObj",
            },
            function(BeerDetails, status, errorMessage){
               if (status === "SUCCESS") {
                   component.find('overlayLib').showCustomModal({
                       header: "Beer Details",
                       body: BeerDetails,
                       showCloseButton: true,
                       closeCallback: function() {
                           alert('You closed the alert!');
                       }
                   })
               }
           });
               
                     
}
});


BeerDetails.cmp
_______________
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <aura:attribute name="beerId" type="String"/>
    <lightning:recordForm
        recordId="{!v.beerId}"
        objectApiName="Beer__c"
        layoutType="Full"
        columns="2"
        mode="view" />
  <div>
<lightning:button label="Order Now!" onclick="{!doOrder}" variant="brand"/>
</div>
</aura:component>