Popup/Modal in Lightning Component

Modal is a very useful component. Modals display a dialog in the foreground of the app, interrupting a user’s workflow and drawing attention to the message. A modal blocks everything else on the page until it’s dismissed. A modal must be acknowledged before a user regains control over the app again.
Today we will create a popup/modal in Lightning component. For this we will use the lightning:overlayLibrary. Which is a Salesforce standard component and also support mobile app.

We have enhanced the standard library and break the modal into three components. So that we can redesign each part individually.

First we will create a generic component from which we will initialize the modal.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="titleMessage" type="String" default="Information" />
    <aura:attribute name="bodyMessage" type="String" default="We have created a generic model component!!" />
    <aura:attribute name="footerButtonDisplay" type="boolean" default="false" />
    <aura:attribute name="bodyComponent" type="String" default="c:LightningModelComp" />
    <aura:attribute name="FooterComponent" type="String" default="c:LightningModelFooterComp" />
    <div class="slds-form-element">
		<div class="slds-form-element__control">
            <lightning:overlayLibrary aura:id="overlayLib"/>
            <lightning:button name="modal" label="Show Modal" onclick="{!c.handleShowModal}"/>
        </div>
    </div>
</aura:component>

Controller

({
    handleShowModal: function (component, event, helper) {
        var modalBody;
        var modalFooter;
        $A.createComponents([
            [component.get("v.bodyComponent"), { messageBody: component.get("v.bodyMessage"), }],
            [component.get("v.FooterComponent"), {}]
        ],
            function (components, status) {
                if (status === "SUCCESS") {
                    modalBody = components[0];
                    modalFooter = components[1];
                    component.find('overlayLib').showCustomModal({
                        header: component.get("v.titleMessage"),
                        body: modalBody,
                        footer: modalFooter,
                        showCloseButton: true,
                        cssClass: "my-modal",
                        closeCallback: function () {
                            alert('You closed the alert!');
                        }
                    })
                }
            }
        );
    },
})

As we have used 3 components and created them runtime using $A.createComponents tag. So if you want to use your existing components and want to show them in modal/popup you can easily do that.
This will be helpful where you have your own custom component which you want to display in popup just like new record creation.
We can also use this component to show different message or error notification.
As we have given dynamic component name, So using the $A.createComponents tag we can our existing components as well. We can pass our custom message to show in model. We can also display all error message using this.

Now I will explain all attribute usages:

• titleMessage: Used to display Header section message
• bodyMessage: Used to display message body
• footerButtonDisplay: If we want to display footer buttons, default is false.
• bodyComponent: If you want to use your own component in body.
• FooterComponent: If you want to use your own component in footer.

Here is how our final output will look:

You can check my github-repo for complete code reference. 

 Check my post to start development on Lightning Web Components Open Source. 

Did you like popup/modal in Lightning or want to improve this, let me know in comments section. Happy programming 🙂