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>