How To Do It In Salesforce: Modal/Popup Box In Lightning Component

How to implement Model or Popup Box in Lightning Component?

Use the below code to implement it.

ModelDemo.cmp => Lightning Component Code

<aura:component>
    <!--use boolean attribute for Store true/false value,make default to "false" so modal box are not display on the load of component. --> 
    <aura:attribute name="isModelBoxOpen" type="boolean" default="false"/>
    
    <!--Use "slds-m-around_xx-large" class to add standard X-Large padding to the component--> 
    <div class="slds-m-around_xx-large">        
        <lightning:button variant="brand" 
           label="What is Lightning Modal/PopUp Box?" 
           title="What is Lightning Modal/PopUp Box?" 
           onclick="{! c.openModel }" />
        <!--Use aura:if tag to display Model Box, on the bese of conditions. [isModelBoxOpenboolean attribute] -->   
        <aura:if isTrue="{!v.isModelBoxOpen}">            
            <!--###### MODAL BOX Start######--> 
            <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">
                    <!-- ###### MODAL BOX HEADER Start ######-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                           onclick="{! c.closeModel }"
                           alternativeText="close"
                           variant="bare-inverse"
                           class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Lightning Modal/PopUp Box</h2>
                    </header>
                    <!--###### MODAL BOX BODY Part Start######-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis. Cillum sunt ad dolore quis aute consequat ipsum magna exercitation reprehenderit magna. Tempor cupidatat consequat elit dolor adipisicing asdasd asdetg jhkirty iouiodc eryrm, ksjlkdfjoern  oksmelsm ljsflr.
                            </b>
                        </p>
                    </div>
                    <!--###### MODAL BOX FOOTER Part Start ######-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" 
                           label="Cancel"
                           title="Cancel"
                           onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand" 
                           label="Ok"
                           title="Ok"
                           onclick="{! c.submitBox }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            <!--###### MODAL BOX Part END Here ######-->            
        </aura:if>
    </div>
</aura:component>

ModelDemo.js => Lightning Js Controller Code

({
   openModel: function(component, event, helper) {
      // for Display Model,set the "isModelBoxOpen" attribute to "true"
      component.set("v.isModelBoxOpen", true);
   },
   closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the "isModelBoxOpen" attribute to "False"  
      component.set("v.isModelBoxOpen", false);
   },
   submitBox: function(component, event, helper) {
      // set the "isModelBoxOpen" attribute to "False for close the model Box.
      component.set("v.isModelBoxOpen", false);
   },
})

ModelDemo.App => Lightning component App

<aura:application extends="force:slds">
    <c:ModelDemo/> <!-- here c: is org. namespace prefix-->
</aura:application>

Now Run ModelDemo.App and click on What is Lightning Modal/PopUp Box? button. :)

Subscribe blog for More updates !!!

Read More: WhatsApp on Salesforce Integration in 5 Steps
Which Salesforce API Do I Use in Integration?
When To Use Salesforce REST API
When To Use Salesforce SOAP API
When To Use Salesforce Bulk API

Latest Salesforce Interview Questions and Answers: