<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <!--use boolean attribute for Store true/false value,
    make default to "false" so modal box are not display on the load of component. 
    --> 
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    
    <!--Use "slds-m-around_xx-large" class to add standard X-Large padding to the component--> 
    <div class="slds-m-around_xx-large">
        
        <lightning:button variant="brand"
                          label="Case Model"
                          title="Case Model"
                          onclick="{! c.openModel }" />
        <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->   
        <aura:if isTrue="{!v.isOpen}">
            
            <!--###### MODAL BOX Start######--> 
            <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">
                    <!-- ###### MODAL BOX HEADER Start ######-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Case Information Details</h2>
                    </header>
                    <!--###### MODAL BOX BODY Part Start######-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>
                            <!-- Calling Other Component -->   
                            <c:Lightning_Input_Component/>
                            </b>
                        </p>
                    </div>
                    <!--###### MODAL BOX FOOTER Part Start ######-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" 
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand" 
                                          label="Save"
                                          title="Save"
                                          onclick="{! c.Save }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            <!--###### MODAL BOX Part END Here ######-->
            
        </aura:if>
    </div>
</aura:component>

({
   openModel: function(component, event, helper) {
      // for Display Model,set the "isOpen" attribute to "true"
      component.set("v.isOpen", true);
   },
 
   closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  
      component.set("v.isOpen", false);
   },
 
   Save: function(component, event, helper) {
      // and set set the "isOpen" attribute to "False for close the model Box.
      component.set("v.isOpen", false);
   },
})

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <div class="row">
     <lightning:textarea name="input3" label="Case Reason" placeholder="Enter Case reason details"/>
  </div>
	
</aura:component>