4

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 : enter image description here

SLDS modal where header comes above the modal

enter image description here

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>

Improve this question
2
  • can you share your component code as well – Vamsi Krishna Gosu Jul 29 '16 at 3:54
  • Shared the code – amar Jul 29 '16 at 4:23
6

It is because of the header's z-index:
enter image description here

Also, you might not want the page scrollable when the modal is displayed enter image description here

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: enter image description here

Improve this answer
3
  • Is this still the preferred way of doing it? – Eric Jan 10 '17 at 22:32
  • 1
    Hi Eric, I still couldn't find any solution from SF side. So, looks like I have to keep using this. – Yiqin Feb 16 '17 at 22:16
  • Not working when to load the modal onLoad of the screen, is there something else to achieve the same functionality ? – Abhi Tripathi Aug 24 '17 at 17:38
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.