How to remove black shadow from Aura component Model?

Question

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:

Any idea to fix the styling?

Aura Component:

 <aura:if isTrue="{!v.isModalOpen}">
        
        <div>
            <!--<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">
                    <p>text...............</p>
                </div>
                <div class="slds-modal__footer">
                    <center>
                        <lightning:button label="Got it"
                                          variant="brand" class="slds-m-top--medium"
                                          onclick="{!c.handleClick}"/>
                    </center>
                </div>
            </div>
            <!--</section>-->
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
        
    </aura:if>

Answer 1

You can change:

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

To:

<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.