function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Eran VizelEran Vizel 

Lightning Modal fade isn't working

I'm building a custom wizard in a Lightning compnent, and using a modal to confirm before submit.
I'm trying to make the modal appear in fade (similarly to the out of the box modals), but it doesn't seem to work although I'm working with the fade blueprint from SLDS.

This is my code, please advise?

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="SDR_Meeting_Controller">
    
    <aura:attribute name="isValuable" type="Boolean" default="false" />
    <aura:attribute name="currentEvent" type="Event" default="{ 'sobjectType': 'Event' }"/>
    <aura:attribute name="isExistingOpp" type="Boolean" default="false"/>
    <aura:attribute name="showActionRequiredCard" type="Boolean" default="true"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    
    <aura:handler name="init" action="{!c.init}" value="{!this}"/>
    
    <aura:if isTrue="{!v.showActionRequiredCard}">
        
        <lightning:card iconName="action:log_event">
            
            <aura:set attribute="title">
                Action Required
            </aura:set>
            
            <aura:set attribute="actions">
                <lightning:button label="Submit" type="submit" onclick="{!c.openModal}" variant="brand"/>
            </aura:set>
            
            <p class="slds-p-horizontal_small">
                
                <b><ui:outputText value="{!'This SDR Meeting is complete.'}"/></b><br/><br/>
                <ui:outputText value="{!'Name: '+ v.currentEvent.Who.Name}"/><br/>
                <ui:outputText value="Company: "/><br/>  
                <ui:outputText value="Meeting Date: "/><ui:outputDate value="{!v.currentEvent.SDR_Meeting_Completed__c}"/><br/><br/>

              <div class="demo-only slds-size_1-of-2">
                    <div class="slds-form-element">
                        
                        <label class="slds-checkbox_toggle slds-grid">
                            
                            <b><span class="slds-form-element__label slds-m-bottom_none">Was this meeting valuable?</span></b>
                            <ui:inputCheckbox aura:id="thebox" change="{!c.handleCheck}"/>
                            <span id="checkbox-toggle-2" class="slds-checkbox_faux_container" aria-live="assertive">
                                <span class="slds-checkbox_faux"></span>
                                <span class="slds-checkbox_on">Valuable</span>
                                <span class="slds-checkbox_off">Not Valuable</span>
                            </span>
                        </label>
                    </div>
                </div>
                <br/>
                <ui:outputText value="SDR Meeting Feedback Reason: "/>
                <force:inputField value="{!v.currentEvent.SDR_Meeting_Feedback_Reason__c}" change="{!c.handleOpp}"/><br/>
                
                <aura:renderif isTrue="{!v.isExistingOpp}">
                    
                    <aura:set attribute="body">
                        <ui:outputText value="Select Existing Opportunity: "/>
                        <force:inputField value="{!v.currentEvent.Opportunity__c}"/>
                        <br/> 
                    </aura:set>         
                </aura:renderif> 
                
            <ui:outputText value="Comments: "/>
                <force:inputField value="{!v.currentEvent.Description}"/><br/>
                
            </p>
   
        </lightning:card>
    </aura:if>
  
    <aura:if isTrue="{!v.isOpen}">
      
<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"
                                              onclick="{!c.closeModal}"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Confirmation</h2>
                    </header>
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
       Are you sure you want to submit this SDR Meeting?
      </div>
      <footer class="slds-modal__footer">
        <lightning:button variant="neutral" label="Cancel" onclick="{! c.closeModal }"/>
        <lightning:button variant="brand" label="OK" onclick="{! c.handleClick }"/>

      </footer>
    </div>
  </section>
  <div class="slds-backdrop slds-backdrop_open"></div>
</div>
        
</aura:if>    
</aura:component>
Maharajan CMaharajan C
Hi Eran,

I have checked your modal code in component it's working pls check the controller:

check the controller method name ---> openModal is you have so in the controller it should not be openModel 

Lightning is case sensitive.

openModal: function(component, event, helper) {                    // check here
      // for Display Model,set the "isOpen" attribute to "true"
      component.set("v.isOpen", true);
   }


and also aura:if logic.

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!

Thanks,
Raj
 
Eran VizelEran Vizel

Sorry, seems like I didn't explain my problem in clarity.

The modal itself is working, it's opening. But the fade effect doesn't work although I used that css class. The modal appear immediatley, without the fade in effect.

Thanks,
Eran
Mikhail RadchenkoMikhail Radchenko
Hello everyone! Solution is simple.
If you want to use animation effects that provided by slds(for exmaple for modals), you have to "toggle" corresponding animation classes, whereas you used to just show and hide parent div.
Let's assume that initially modal has to be hidden. 
<div class="demo">
    <button class="slds-button" type="button" onclick="{ !c.toggleModal }">Toggle</button>
    <div>
        <section aura:id="modalId" role="dialog" tabindex="-1" class="slds-modal">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button onclick="{! c.toggleModal }" class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                        <lightning:icon iconName="utility:close" variant="inverse"/>
                    </button>
                    <h2 class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium">
                    <div>Content</div>
                </div>
                <footer class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" onclick="{! c.toggleModal }">Cancel</button>
                </footer>
            </div>
        </section>
        <div aura:id="backdropId" class="slds-backdrop"></div>
    </div>
</div>


Pls notice that modal <section> and backdrop <div>(at the bottom) haven't got any additional "animation" classes.

So, toggleModal action in your controller can look like this:

({
    toggleModal: function(component, event, helper) {
        var modal = component.find('modalId');
        var backdrop = component.find('backdropId');
        $A.util.toggleClass(modal, 'slds-fade-in-open');
        $A.util.toggleClass(backdrop, 'slds-backdrop_open');
    }
})

Pay attention that we are toggling corresponding classes as for modal <section> as for backdrop <div>
Hope it helps.
Mohamed ali boucetta 3Mohamed ali boucetta 3
<div class="slds-backdrop slds-backdrop--open" id="backdrop"></div>
You only need to add the following code at the end of the modal