Modal/Popup in Lightning Component

In this post we will talk about how to create modal/Popup in Lightning Component.

Problem :- How to open popup on button Click

Here is Solution :) 

/* ModelDemo */

<aura:component >
    <aura:attribute name="ShowModule" type="boolean" default="false"/>  
    <lightning:button variant="success" label="Open popup" title="Open popup"
                                        onclick="{!c.ShowModuleBox}" />
  
  
    <aura:if isTrue="{!v.ShowModule}">
        <!--
            I Used SLDS for this code
            Here is link https://www.lightningdesignsystem.com/components/modals/
        -->      
        <div class="demo-only" style="height: 640px;">
            <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" variant="bare" onclick="{! c.HideMe }"
                                              alternativeText="Close" class="slds-modal__close" />

                        <!--   
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                            You Can add Button Icon Here if you want
                            <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close" />
                            </svg>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                       -->
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p>Salesforce Apex Hours</p>
                    </div>
                    <footer class="slds-modal__footer">
                        <button class="slds-button slds-button_neutral">Cancel</button>
                        <lightning:button variant="brand" label="Hide Me" title="Hide Me" onclick="{! c.HideMe }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
      
    </aura:if>  
  
</aura:component>

Please check Salesforce documentation for Button Icon .
Please check Salesforce documentation for Model  . 

/* ModelDemoController */

({
   HideMe: function(component, event, helper) {
      component.set("v.ShowModule", false);
   },
   ShowModuleBox: function(component, event, helper) {
      component.set("v.ShowModule", true);
   },
})

/* DemoApp */

<aura:application extends="force:slds">
    <c:ModelDemo/>
</aura:application>

Result :-

If you want to learn about Lightning Component. Please check our old post
1) Component Event in Lightning Component | aura:event
2) Invoke Apex from Lightning Component
3) Design Resource In Lightning Component Bundle


Thanks,
Amit Chaudhary
  @amit_sfdc    #SalesforceApexHours    @ApexHours
  Salesforce Apex Hours