Lightning Modal/Popup Lightning Aura Component Salesforce

Hello Guys, In this post I'll create lightning Modal in Lightning Aura component Salesforce.

Modals are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.

Check below example

LightningModalAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <!--Attributes -->
    <aura:attribute name="isModalOpen" type="boolean" default="false"></aura:attribute> 
    
    <!--Lightning Button which will open Modal on the click of it -->
    <lightning:button variant="brand" label="Open Modal" onclick="{!c.openModal}"></lightning:button>
    
    <!--isModalOpen Attribute will be used to hide/show for modal -->
    <aura:if isTrue="{!v.isModalOpen}">
        <!-- lightning modal Starts here -->
        <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <lightning:buttonIcon iconName="utility:close"
                                              onclick="{!c.closeModal}"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                <div class="slds-modal__header">
                    <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal header</h1>
                </div>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>Modal Content would come here</p>
                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" aria-label="Cancel and close" onclick="{!c.closeModal}">Cancel</button>
                    <button class="slds-button slds-button_brand" onclick="{!c.submit}">Submit</button>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
        <!-- lightning modal Ends here -->
    </aura:if>
</aura:component>

LightningModalAuraController.js

({
	openModal : function(component, event, helper) {
		component.set("v.isModalOpen", true);
	},
    closeModal : function(component, event, helper) {
        component.set("v.isModalOpen", false);		
	},
    submit : function(component, event, helper) {
        //write some logic
		component.set("v.isModalOpen", false);	
	},
})

output

Related Post : Lightning Modal/Popup Lightning Web Component(LWC)