Show Lightning component Modal above Salesforce Global header (Position Issue)

I have added lightning Modal (slds) component A in a another Lightning Component B.
Lightning component B is used to create Lightning Tab.

Now when I show the modal, Position of Modal component A is restricted inside Parent component B.
I would like to display modal above global Header (outside Component A) as in attached screenshot.
CSS z-index is not much helpful, may be i am wrong.
Please help to fix this position issue.
Thanks for your time.`

Followed – Markup From SLDS Page (Summer ’17)

<div class="slds">
    <section role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="modal-content-id-2" aria-describedby="modal-content-id-2" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <header class="slds-modal__header"></header>
    <!-- Modal Content -->
    <div class="slds-backdrop slds-backdrop_open"></div>

Show Lightning component Modal above Salesforce Global header (Position Issue)


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Was solved earlier. Issue in Lightning desing System modal component

Additional thing to take care is to revert change by applying css “as it was” while closing the modal.

Verified how it is being done (Salesforce Standard) to show New Object Record (Ex: Account) Modal.
Header z-index has been made to 0 and
.forceStyle.desktop .viewport class overflow to hidden.


<aura:attribute name="cssStyle" type="String" />
<!-- Style tag is considered as root element if this is the first line in Markup. Make sure you have this at the end (just before </aura:component>) if you have any js functions which works on root element css -->

Helper Js

applyCSS: function(component){
    component.set("v.cssStyle", ".forceStyle .viewport .oneHeader.slds-global-header_container {z-index:0} .forceStyle.desktop .viewport{overflow:hidden}");
revertCssChange: function(component){
    component.set("v.cssStyle", ".forceStyle .viewport .oneHeader.slds-global-header_container {z-index:5} .forceStyle.desktop .viewport{overflow:visible}");

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x