0

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

3 Answers 3

0

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

1
  • this would be the solution i would have suggested is to communicate back to the caller to trigger the second modal, and fire back the event to confirm to the original modal. you should probably mark this as complete if this is resolved now.
    – Ronnie
    Jan 10, 2020 at 20:19
0

This can also be fixed using below CSS properties on slds-backdrop element.

  1. Width = 100vw or more
  2. Left = use calc function to dynamically calculate

Example :

<div class="slds-backdrop slds-backdrop_open" style="width: 100vw;left: calc(-50vw + 50%);"></div>
0

Just remove the.... slds-backdrop -->> this selector will
Creates the shaded backdrop used behind the modal.

1
  • It's not very clear in the question, but I think the OP wanted the modal not to appear on top of another visible modal. How does the removal of the shaded backdrop prevent this? Oct 24, 2023 at 10:38

You must log in to answer this question.

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