Show Modal box using lightning:overlayLibrary in Lightning component

This Post explains the how to show modal box using lightning:overlayLibrary

What is Modal?
1. Modal blocks everything else on the page until it’s dismissed.
2. Modal is triggered by user interaction, which can be a click of a button or link.
3. The modal header, body, and footer are customizable. Pressing the Escape key or clicking the close button closes the modal.

Demo:
OverlayLibrarydemoComponent

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="strRecId" type="String" />
    <lightning:overlayLibrary aura:id="overlayLibDemo"/>
    <div class="slds-theme_default">
        <p>
            <h1>Lightning OverlayLibrary Example</h1>
            <lightning:button variant="brand" label="Account Edit" title="Account Edit" onclick="{!c.showModal}" />
        </p>
    </div>
</aura:component>

OverlayLibrarydemoComponentController

({
 showModal : function(component, event, helper) {
  helper.showModalHelper(component, event, helper);
 }
})

OverlayLibrarydemoComponentHelper

({
    showModalHelper : function(component, event, helper) {
        var strAccId = component.get("v.recordId");
        console.log('Account Id ====>'+strAccId);
        $A.createComponent("c:AccountEditComponent", 
                           {strRecordId : strAccId},
                           function(result, status) {
                               if (status === "SUCCESS") {
                                   component.find('overlayLibDemo').showCustomModal({
                                       header: "Account Edit Form",
                                       body: result, 
                                       showCloseButton: true,
                                       cssClass: "mymodal", 
                                   })
                               }                               
                           });
    }
})

OverlayLibrarydemoComponent.css

.THIS {
    text-align: center;
    vertical-align: middle;
    line-height: 90px;  
    font-size: 20Px;
}

below component shows in the modal box  when clicking the button
AccountEditComponent

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="strRecordId" type="String" />
    <lightning:overlayLibrary aura:id="overlayLibDemo1"/>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <div class="slds-theme_default">
        <lightning:recordEditForm aura:id="editform"
                                  onsubmit="{!c.handleSubmit}"
                                  onsuccess="{!c.handleSuccess}"
                                  recordId="{!v.strRecordId}"
                                  objectApiName="Account">
            <lightning:messages />
            
            <lightning:inputField fieldName="Name" aura:id="accName" />
            <lightning:inputField fieldName="Industry" />
            <lightning:inputField fieldName="Phone" />          
            <lightning:inputField fieldName="Type" />
            <div class="slds-m-top_medium">
                <lightning:button variant="brand" type="submit" name="save" label="Save" />
            </div>
        </lightning:recordEditForm>
    </div>
</aura:component>

AccountEditComponentController

({
    handleSubmit : function(component, event, helper) {
        component.find('editform').submit();
    },
    
    handleSuccess : function(component, event, helper) {
        var strAccName = component.find("accName").get("v.value");
        component.find('notifLib').showToast({
            "variant": "success",
            "title": strAccName,
            "message": "Account Updated Successfully!!"
        });
        component.find("overlayLibDemo1").notifyClose();
    },
})

Let us Know if you have any queries
Happy Learning!!