How to create modal box in lightning by dynamic component creation

Today i will be going to explain how we can dynamically create component using
$A.createComponent and display information using showCustomModal in lightning.

To explain this i am going to use an input text field and based on the search i am going to display accounts information using lightning card and inside lightning card i will be going to display lightning button and on click of which i will be going to create a component dynamically using $A.createComponent to which i will be passing account id and this component will display account details using lightning:recordForm in read only mode in modal box which will be displayed using showCustomModal. 


VIDEO:

searchAccount.cmp

<aura:component controller="searchAccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" access="global">
    <aura:attribute name="keywordHolder" type="string" />
    <aura:attribute name="accountList" type="list" />
    <aura:attribute name="AccountIdForDisplayingDeatil" type="string"/>
    <lightning:input name="AccountSearch"  label="Enter Account Name" value="{!v.keywordHolder}"/>
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button label="Search Account" onclick="{!c.findAccount}" />
    <div class="slds-grid slds-wrap">
    <aura:iteration var="acc" items="{!v.accountList}" indexVar="index" >
        <div class="slds-col slds-size_1-of-4 slds-p-around_small">
    <lightning:card title="Account Info" >
        <aura:set attribute="actions">
                <lightning:button name="{!acc.Id}" onclick="{!c.showDetails}" label="FULL DETAILS"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
        <b>Account Name:</b> {!acc.Name}<br></br>
        <b>Account Type:</b> {!acc.Type}<br></br>
        <b>Account Industry:</b> {!acc.Industry} <br></br>
        <b>Account Phone:</b> {!acc.Phone}<br></br>
        </p>
    </lightning:card>
        </div>
    </aura:iteration>
    </div>
</aura:component>

searchAccountController.js

({

    findAccount: function(component, event, helper) {

        var action = component.get('c.fetchAccount');

        action.setParams({

            searchKeyWord: component.get("v.keywordHolder")

        });

        action.setCallback(this, function(response) {

            var state = response.getState();

            var response1 = response.getReturnValue();

            if (state === "SUCCESS") {

                component.set("v.accountList", response1);

            }

        });

        $A.enqueueAction(action);

    },

    showDetails: function(component, event, helper) {

        var eventSource = event.getSource();

        var accId = eventSource.get('v.name');

        var modalBody;

        $A.createComponent("c:ShowCompleteAccountDetail", {

            "accountId": accId

        }, function(content, status) {

            if (status === 'SUCCESS') {

                modalBody=content;

                //alert('Inside success');

                component.find("overlayLib").showCustomModal({

                       header: "Account Detail",

                       body: modalBody, 

                       showCloseButton: true,

                       closeCallback: function() {

                           alert('You closed the alert');

                       }

                })

            }

        });

    }

})

ShowCompleteAccountDetail.cmp

<aura:component >

    <aura:attribute name="accountId" type="string"/>

    <div class="sld-p-around_small">

   <lightning:recordForm

        recordId="{!v.accountId}"

        objectApiName="Account"

        layoutType="Full"

        columns="2"

        mode="readonly" />

    </div>

</aura:component>

searchAccountController.apxc

public class searchAccountController {

@AuraEnabled

 public static List < account > fetchAccount(String searchKeyWord) {

  String searchKey = searchKeyWord + '%';

  List < Account > returnList = new List < Account > ();

  List < Account > lstOfAccount = [select id, Name, Type, Industry, Phone, Fax from account where Name LIKE: searchKey limit 10];

  for (Account acc: lstOfAccount) {

   returnList.add(acc);

  }

  return returnList;

 }

}