I created a Aura component which opens pop-up window on Global action click. Pop-up is working fine but I see a black shadow box around the model pop-up section.

Right now it is showing like below: enter image description here

Any idea to fix the styling?

Aura Component:

 <aura:if isTrue="{!v.isModalOpen}">
            <!--<section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">-->
            <div class="slds-modal__container slds-modal slds-fade-in-open">
                <div class="slds-modal__content slds-p-around_medium alignLeft" id="modal-content-id-1">
                <div class="slds-modal__footer">
                        <lightning:button label="Got it"
                                          variant="brand" class="slds-m-top--medium"
            <div class="slds-backdrop slds-backdrop_open"></div>

1 Answer 1


You can change:

<div class="slds-backdrop slds-backdrop_open"></div>


<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0" class="slds-backdrop_open"></div>

This will still have the effect of blocking background elements without the color change.

You must log in to answer this question.

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