Wednesday 12 September 2018

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
        <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="" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close" />
                            <span class="slds-assistive-text">Close</span>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p>Salesforce Apex Hours</p>
                    <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 }"/>
            <div class="slds-backdrop slds-backdrop_open"></div>

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">

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

Amit Chaudhary
Capture.JPG  @amit_sfdc    #SalesforceApexHours    @ApexHours
  Salesforce Apex Hours


1 comment:

  1. Can modal loads automatically? I.e. when a record page load? Or before it finishes loading?