Salesforce Lightning Modal Container

Below is the code for creating custom modal in salesforce lightning.

<!-- Below lines of code in the component.cmp file -->

<div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="accountModalDialog">  
      
        <div class="slds-modal__container">   
         
            <div class="slds-modal__header slds-theme--info">
                <h2 class="slds-text-heading--medium">Approve Transaction</h2>                
            </div>

<div class="slds-modal__content slds-p-around--medium">
                              
                         
                 <div aura:id="nameLblId" class="slds-form-element__label slds-m-top--medium slds-text-body--regular ">
                     <label class="slds-align-middle" >FullName<abbr class="slds-required" title="required">*</abbr></label>
                 </div>
                 <ui:inputTextArea class="slds-m-top--medium" aura:id="name" Label="Name" rows="3" value="{!v.Name__c}" />
                              
                              
             </div>
             <div aura:id="btnpanelId" class="slds-modal__footer">
                <ui:button class="slds-button slds-button--brand" press="{!c.SaveName}" label="Submit" />
                <ui:button class="slds-button slds-button--neutral" press="{!c.CloseWindow}" label="Cancel" />
             </div>
</div>

</div>

<!-- below button will show the modal when clicked -->

<ui:button press="{!c.showModal}" label="Show Modal>


<!-- Add below lines of code in the controller.js file -->

ShowModal : function(component, event, helper) {

        helper.showPopupHelper(component, 'accountModalDialog', 'slds-fade-in-');
helper.showPopupHelper(component,'accountModalDialog','slds-backdrop--');
       
},
   
hideModal : function(component,event,helper){
       
        helper.hidePopupHelper(component, 'accountModalDialog', 'slds-fade-in-');
helper.hidePopupHelper(component, 'accountModalDialog', 'slds-backdrop--');
     
    }

<!-- Add below lines of code in the helper.js file, this method will hide and unhide the modal on the UI -->


    showPopupHelper : function(component, componentId, className){
        var modal = component.find(componentId);
        $A.util.removeClass(modal, className+'hide');
        $A.util.addClass(modal, className+'open');
    },  
    hidePopupHelper: function(component, componentId, className){
        var modal = component.find(componentId);
        $A.util.addClass(modal, className+'hide');
        $A.util.removeClass(modal, className+'open');
       

    }