+ Start a Discussion
Greg FinzerGreg Finzer 

How to do a back drop for a Lightning Popup?

I am implementing a popup and it is working well but I need to have a backdrop like other lightning modals.  What am I missing?
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="FRCAddRenoPopupController">
    <aura:attribute name="accountId" type="Id"/>
    <aura:attribute name="PageHeading" type="String" default="Add Renovation" />
    
    <aura:attribute name="reno" type="FRC_Renovation__c" default="{'sobjectType' : 'FRC_Renovation__c',
                                                                  'Name' : '',
                                                                  'Renovation_Start_Date__c' : '',
                                                                  'Renovation_End_Date__c' : ''}"/>    
       
    <lightning:button label="Add Renovation"
                      iconName="utility:new_window"
                      iconPosition="left"
                      variant="brand"
                      onclick="{!c.newPopup}"
                      />   
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="renoAddModal" class="slds-modal slds-modal_large">
        <div class="slds-modal__container" style="width: 65%;">
            <div class="slds-modal__header" style="font-size: 1.5em">
                Add Renovation             
            </div>
            
            <div class="slds-modal__content slds-p-around--medium">
                <div class="slds-p-left_xx-large slds-p-right_xx-large" style="padding-left:0px">
                    <div class="slds-page-header" style="padding-top: 9px; padding-bottom: 9px;padding-right: 9px;">
                        <h3 style="font-size: 1rem;" title="">Renovation Information</h3>
                    </div> 
                </div>    
                <div class="slds-grid slds-p-top_medium">
                    <div class="slds-size_11-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <lightning:input label="Renovation Name" required="true" name="renovationName" value="{!v.reno.Name}"/> 
                    </div>
                </div>
                <div class="slds-grid slds-p-top_x-small">
                    <div class="slds-size_6-of-12 slds-p-left_xx-large slds-p-horizontal_x-large " >
                        <ui:inputDate aura:id="renovationStartDate" required="true" value="{!v.reno.Renovation_Start_Date__c}" displayDatePicker="true" format="MM/dd/yyyy"/>
                    </div>
                    <div class="slds-size_5-of-12 slds-p-left_xx-small slds-p-horizontal_x-large " >
                        <ui:inputDate aura:id="renovationEndDate" value="{!v.reno.Renovation_End_Date__c}" displayDatePicker="true" format="MM/dd/yyyy"/>                        
                    </div>
                </div>
            </div>
            <div class="slds-modal__footer">
                <lightning:button label="Save" onclick="{!c.saveModal}" />
                <lightning:button label="Cancel" onclick="{!c.closeNewModal}" />
            </div>
        </div>
    </div>    
</aura:component>

​​​​​​​