[SalesForce] Issue on background of the modal is opened inside another modal

Please check the code

<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aura:id="Modalbox" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
        <div class="slds-modal__container" style="width:350px;">
            <header class="slds-modal__header">
                <lightning:buttonIcon iconName="utility:close"
                                      onclick="{! c.closeModel }"
                                      alternativeText="close"
                                      variant="bare-inverse"
                                      class="slds-modal__close"/>
                <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Choose Pricebook</h2>
            </header>
            <div class="slds-modal__content slds-var-p-around_large" style="overflow: initial;" id="modal-content-id-1">
                <p>


                    all products from the opportunity price book group.</p> <br></br>
                <lightning:combobox name="Price Book" label="Price Book" value="{!v.selectedPricebookId}" placeholder="Select Price book" options="{!v.priceBookList}" />
                <div>
                    <aura:if isTrue="{!v.isPricebookChange}"> 
                        <c:confirm_Pricebook_Change opportunityId="{!v.opportunityId}"   selectedPricebookId="{!v.selectedPricebookId}"/>
                    </aura:if>
                </div>
            </div>
            <footer class="slds-modal__footer">
                <lightning:button variant="neutral"
                                  label="Cancel"
                                  title="Cancel"
                                  onclick="{!c.closeModel}"/>
                <lightning:button variant="brand"
                                  label="Save"
                                  title="Save"
                                  onclick="{!c.handleSave}"/>
            </footer>
        </div>

    </section>
    <div class="slds-backdrop slds-backdrop_open" aura:id="Modalbackdrop"></div>

where confirm_Pricebook_Change is another Modalenter image description here

Best Answer

To over come this i have used two modals in same component usinf aura:if