In today’s post we’ll see how to display modal/popup using Lightning aura component.

Popup Modals are used to display content in a layer over the current screen, ideally used to show record details, record edits, message with ok and cancel button,wizards etc.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
	<!--use boolean attribute to Store true/false value,
    make default to "false" so modal/popup is hidden on the load of component. --> 
    <aura:attribute name="showModal" type="boolean" default="false"/>
    
     
    <div class="slds-m-around_xx-large">
        
        <lightning:button variant="brand"
                          label="Open Modal"
                          title="Open Modal"
                          onclick="{! c.openModal }" />
        <!--aura:if tag to display Modal on the basis of showModal attribute value -->   
        <aura:if isTrue="{!v.showModal}">
            
            <!--Start of Modal box --> 
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- Start of Modal Header -->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModal }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">TheNerdVibe - Aura Modal Component</h2>
                    </header>
                    <!--Start of modal body-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>Salesforce Lightning : Modal/Popup Box using lightning aura component
                            
                            </b>
                        </p>
                    </div>
                    <!--Start of Modal footer -->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" 
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModal }"/>
                        <lightning:button variant="brand" 
                                          label="Visit Site"
                                          title="Visit Site"
                                          onclick="{! c.Close }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            
            
        </aura:if>
    </div>
</aura:component>
({
   openModal: function(component, event, helper) {
      // showModal will be set to true, to show modal
      component.set("v.showModal", true);
   },
 
   closeModal: function(component, event, helper) {
       // showModal will be set to false, to close modal 
      component.set("v.showModal", false);
   },
 
   Close: function(component, event, helper) {
      // showModal will be set to false, to close modal 
      // navigate to website
      component.set("v.showModal", false);
       var eUrl= $A.get("e.force:navigateToURL");
        eUrl.setParams({
          "url": 'https://thenerdvibe.com/' 
        });
        eUrl.fire();
   },
})

Demo:

auramodal button
Aura modal

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here