Issue in Lightning desing System modal component

Question

I have developed new Modal using lightning desing system.In standard modal new button pop up appears on whole broweser lightning page. But when I desgined using SLDS it will come up but still salesforce header bar is accesible which will display on my modal component

Standar way :

SLDS modal where header comes above the modal

Component Code :

    <div class="slds-modal slds-fade-in-open" style="display:none;" aria-hidden="false" role="dialog" id="QuickInvestor_modal">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">Quick Investor</h2> 
                <button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.showModalBox}">
                    <c:svg class="slds-button__icon slds-button__icon--large"
                           xlinkHref="/resource/SLDS/assets/icons/action-sprite/svg/symbols.svg#close"
                           ariaHidden="true"
                           />
                    <span class="slds-assistive-text">Close</span>
                </button>
            </div>
            <div class="slds-modal__content slds-p-around--medium">
                <div class="form-element__group">
                    <div class="slds-form-element__row">
                        <div class="slds-form-element slds-size--1-of-2">
                            <ui:inputText aura:id="newinvestor" label="Investor Contact Role"
                                          labelClass="slds-form-element__label" class="slds-input"/>
                        </div>
                        <div class="slds-form-element slds-size--1-of-2">
                            <ui:inputSelect aura:id="newinvestor" labelClass="slds-form-element__label" 
                                            required="false" class="slds-input" label="Default Email">
                                <ui:inputSelectOption text="Work1" label="Work1"/>
                                <ui:inputSelectOption text="Work2" label="Work2"/>
                            </ui:inputSelect>
                        </div>
                    </div>
                </div>
                <div class="form-element__group">
                    <div class="slds-form-element__row">
                        <div class="slds-form-element slds-size--1-of-2">
                            <ui:inputText aura:id="expname" label="Account Name"
                                          class="slds-input" labelClass="slds-form-element__label"   value="{!v.quickinvestor.Name}"
                                          required="true"/>   

                        </div>
                        <div class="slds-form-element slds-size--1-of-2">
                            <ui:inputNumber aura:id="expname" label="Email Salutation"
                                            class="slds-input"
                                            labelClass="slds-form-element__label"
                                            value="{!v.quickinvestor.Email_Salutation__c}"
                                            required="true"/>       
                        </div>
                    </div>
                </div>
                <!-- -----------Fields --------------------------------->
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button--neutral">Cancel</button>
                <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
            </div>
        </div>
    </div>
     <div class="slds-backdrop slds-backdrop--open" id="QuickInvestorBackground" style="display:none;"></div> 

Answer 1

It is because of the header's z-index:

Also, you might not want the page scrollable when the modal is displayed

The workaround is to override the css:
add a < style > block and aura:attribute for the css style

<aura:component>
    <aura:attribute name="cssStyle" type="String" />
    <style>
        {!v.cssStyle}
    </style>
</aura:component>

then add a function in the controller to change the css

overrideHeaderStyle : function(component, event, helper){
    component.set("v.cssStyle", ".forceStyle .viewport.oneHeader.desktop {z-index:0} .forceStyle.desktop .viewport{overflow:hidden}");
}

This is the result:

Answer 2

As of Winter '18, you can display modals via the lightning:overlayLibrary component and know that it'll display itself properly as an out-of-the-box standard lightning component.