DEV601: Exercise 5.1 alternative solution to closing modal dialog. Note line 14 in .cmp which wraps the original solution. Controller adds 'slds-hide' class without us needing to define our own *.style resource.

ModalDialog.cmp

<aura:component>
    
    <aura:attribute name="title" type="String" required="true" />
    <aura:attribute name="closeable" type="Boolean" default="true"/>
    
    <aura:attribute name="closeLabel" type="String" default="Close"/>
    <aura:attribute name="cancelLabel" type="String" default="Cancel"/>
    <aura:attribute name="confirmLabel" type="String" default="OK"/>
    
    <aura:attribute name="onclose" type="Aura.Action" default="{!c.defaultCloseAction}"/>
    <aura:attribute name="oncancel" type="Aura.Action" default="{!c.defaultCloseAction}"/> 
    <aura:attribute name="onconfirm" type="Aura.Action" default="{!c.defaultCloseAction}"/>
    
    <div aura:id="modalDialogContainer">
        
        <div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open">
            
            <div class="slds-modal__container">
                
                <div class="slds-modal__header">
                    
                    <aura:if isTrue="{!v.closeable}">
                        <lightning:buttonIcon
                                              class="slds-modal__close"
                                              iconName="utility:close"
                                              size="large"
                                              variant="bare-inverse"
                                              alternativeText="{!v.closeLabel}"
                                              onclick="{!v.onclose}"/>
                    </aura:if>
                    
                    <h2 class="slds-text-heading--medium">{!v.title}</h2>
                    
                </div>
                
                <div class="slds-modal__content slds-p-around--medium">
                    
                    <div>
                        {!v.body}
                    </div>
                    
                </div>
                
                <div class="slds-modal__footer">
                    
                    <aura:if isTrue="{!not(empty(v.cancelLabel))}">
                        <lightning:button label="{!v.cancelLabel}"
                                          variant="neutral"
                                          onclick="{!v.oncancel}"/>
                    </aura:if>
                    
                    <aura:if isTrue="{!not(empty(v.confirmLabel))}">
                        <lightning:button label="{!v.confirmLabel}"
                                          variant="brand"
                                          onclick="{!v.onconfirm}"/>
                    </aura:if>
                    
                </div>
                
            </div>
            
        </div>
        
        <div class="slds-backdrop slds-backdrop--open"></div>
        
    </div>
    
</aura:component>

ModalDialogController.js

({
	defaultCloseAction : function(component, event, helper) {
		$A.util.addClass( component.find('modalDialogContainer'), 'slds-hide' );
	}
})