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
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>