4

enter image description here

<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;
} 
5
  • How are you showing the modal.
    – Eric
    Apr 7, 2017 at 6:09
  • i am using add and remove class for showing and hiding modal
    – Hamza
    Apr 7, 2017 at 6:14
  • Are you enclosing your code in <div class="slds"></div> ? Apr 7, 2017 at 8:56
  • @CasparHarmer yes
    – Hamza
    Apr 7, 2017 at 10:09
  • Ahh. The old sf header issue. Give me a few I have a hacky workaround
    – Eric
    Apr 7, 2017 at 13:35

3 Answers 3

1

You have forgotten to make the id on the backdrop an aura:id

Change id="backGroundSectionId"

To aura:id="backGroundSectionId"

2
  • Thanks i have changed that, fading option is resolved. But pop up does not appears on whole browser lightning page
    – Hamza
    Apr 7, 2017 at 6:34
  • Can you add a screenshot of what is happening and describe what you want to happen Apr 7, 2017 at 6:37
1

Full implementation Here

NOTE this is a hack, it may break between releases due to CSS class changes and works as of Winter 17 but

To enable the backdrop and the modal to extend beyond and in front of the SF tabs and header add the following to your component:

<style>
    {!v.modalStyle}
</style>

Then in your code where you open the modal add this:

component.set("v.modalStyle", ".forceStyle .viewport .oneHeader {z-index:0; }
 .slds-global-header_container {position: static;} .forceStyle.desktop 
.viewport{overflow:hidden}");

Then when you hide the modal use this code to clear the style css

component.set("v.modalStyle", "");
6
  • Thanks. But still it is not working. Pop up appears in the same way.
    – Hamza
    Apr 8, 2017 at 8:04
  • @EffatNaaz - Well I can tell you it works fine for me and without it the modal is behind the SF tabs and header. Use the Dom inspector to see if you can find the elements and manually change the position to static and see if that does not. If so then maybe you need to adjust the selectors a but in your case
    – Eric
    Apr 8, 2017 at 18:36
  • @Effat - any luck on this? May 7, 2017 at 11:36
  • @Eric - when i open the dom inspector and manually change it to below even then it doesnt really hide the SF tabs...forceStyle.desktop .viewport{overflow:hidden}"); May 7, 2017 at 11:49
  • @user2945545 there are 3 CSS changes that are made in the answer not just the overflow hidden
    – Eric
    May 7, 2017 at 13:24
0

The addition of <style> tags wont go through security from upcoming component versions(42) onwards. As an alternative we can use aura:unescapedHTML tag

<aura:unescapedHtml value="{!v.modalStyle}"/>

Controller:

//To hide
component.set("v.modalStyle", "");

//To imply the styles
component.set("v.modalStyle", "<style>.forceStyle .viewport .oneHeader {z-index:0; }
 .slds-global-header_container {position: static;} .forceStyle.desktop 
.viewport{overflow:hidden}</style>");

We have discussed this with salesforce and they have given thumbs up for using this hack. Of course you need to ensure that you are not exposing sensitive information here as mentioned in documentation.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .