Modal Popup in Lightning Component Salesforce

Kapil April 13, 2019


How to display modal popup on button's click in Lightning Component ? 

To display modal popup in your component first create a button in your Component which will be used to show & hide modal popup.  

1
2
3
4
<lightning:button variant="brand"
                          label="Click to Open"
                          title="Click to Open"
                          onclick="{!c.showModel}" />


















After that lets add a boolean type attribute above button tag to store


True & False value.

    
1
<aura:attribute name="showModal" type="boolean" default="false"/>

Copy and paste below code after button in your component.

    
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<aura:if isTrue="{!v.showModal}">
            <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">
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.hideModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">
Modal Box</h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>Modal Popup Box Example 
                            </b>
                        </p>
                    </div>
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.hideModel }"/>
                        <lightning:button variant="brand"
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.saveDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>




As you can see I am using aura if tag before popup. I will use it to show and hide popup.



Now lets do some programming in controller.



open your js controller and create a function named showModal, hideModal, saveDetails as shown below.



modalpopupcontroller.js

  
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
({
   showModel: function(component, event, helper) {
      component.set("v.showModal", true);
   },
  
   hideModel: function(component, event, helper) {
      component.set("v.showModal", false);
   },
  
   saveDetails: function(component, event, helper) {
      component.set("v.showModal", false);
   },
})













As you can see in above code I am just changing the value to true of showModal attribute to true when button is clicked. When the value will be true it will trigger the aura:if tag to show the modal.


If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 









Tags:

































Post a Comment







0
Comments