I have a lightning component with a modal that opens over it.

I want to open this modal on the entire page viewport height and view port width - meaning on top of the lightning experience header.

I use the Strike modal component that is using this markup to disable the background of the modal:

<div id="backdrop" aura:id="backdrop" class="{!'slds-backdrop ' + if(v.fadeIn, 'slds-backdrop--open', '')}"></div>

But with this code, the disabled background does not go over the lightning experience headers as you can see here:

enter image description here

How can I hide the header?

  • It's because the z-index of the header is 5 as default. You can find the header in the page and apply z-index as 0 or less. You can hide it behind the backdrop. Inspect the page get id or other findable attribute of the header.
    – A.Bretto
    Jan 11 '18 at 13:23
  • 2
    check this answer salesforce.stackexchange.com/a/141910/18731
    – Ratan Paul
    Jan 11 '18 at 13:25
  • Also this answer salesforce.stackexchange.com/a/178549/18731
    – Ratan Paul
    Jan 11 '18 at 13:25
  • @RatanPaul that's Great
    – A.Bretto
    Jan 11 '18 at 13:27
  • Thanks for the response :) I saw this solution and wanted to know if there is more elegant way of doing this (maybe even standard by Salesforce?)
    – Amir Lavi
    Jan 11 '18 at 14:06