[SalesForce] Modal pop up issue; background is not fading and pop up does not appears on whole browser lightning page

<div aria-hidden="false" aura:id="newClientSectionId" role="dialog" class="slds-modal slds-modal--large slds-fade-in-open slds-hide" 
     style="width: 60%; margin: auto; ">
    <div class="slds-m-bottom--xx-large"></div>
    <div class="slds-modal__container">
        <div class="slds-modal__header">
            <button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}">
                <span class="slds-assistive-text">Close</span>
            </button>
            <h2 class="slds-text-heading--medium">Create Opportunity</h2>
        </div>
        <div class="slds-modal__content slds-p-around--medium">
            <div class="slds-m-top--xx-large"></div>
        </div>
        <div class="slds-modal__footer"> <button class="slds-button slds-button--neutral" onclick="{!c.showModalBox}">Cancel</button>
            <ui:button class="slds-button slds-button--brand" press="{!c.saveOpportunity}" label="Save" />
        </div>
    </div>
</div>

<div class="slds-backdrop slds-backdrop--open slds-hide" id="backGroundSectionId"></div>

Controller

//for showing modal
$A.util.removeClass(component.find("newClientSectionId"), "slds-hide");
$A.util.removeClass(component.find("backGroundSectionId"), "slds-hide");

CSS

.THIS.slds-hide {
   display:none;
}