Hi Luis,

Thanks for your reply.

My modal IDs are different for both the modals. And both are independent anyway. Did you mean that I need to write specific style class to make the background blur for the 2nd modal? What should it be then? All I am getting from supportive links is to use <slds-backdrop>. With same slds class, the background of the first modal has become blur, as you can see in the picture. The same logic I used in my 2nd modal, but that's not working.

Please let me know, what I need to write specifically to make the background blur apart from using <slds-backdrop>.

This is the parent code, from where I am dynamically creating my 2nd modal component -

$A.createComponent('c:ProdBillComp', {
            'total' : total
        },function(modalComp, status, errorMessage){
            if (status === "SUCCESS"){
                var body = component.get("v.body");
                body.push(modalComp);
                component.set("v.body", body);
            }else if (status === "ERROR"){
                console.log('error to load ProdBillComp');
            }
        });

Also below is the code of my 1st modal. The code for the 2nd modal is already provided in the 1st post -

<aura:component >    
    <aura:attribute name="selectedProds" type="List"/>  
    <aura:attribute name="total" type="Decimal"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>   
    <div aura:id="modalDiv">
        <div role="dialog" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <div class="slds-modal__header">
                    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCloseModal}">
                        X<span class="slds-assistive-text">Close</span>
                    </button>
                    <h1 class="slds-text-heading--medium">Final products are as below :</h1>
                </div>
                
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="slds-align_absolute-center">
                        <aura:iteration items="{!v.selectedProds}" var="prod">
                            Product Name - {!prod.Name}<br/>
                            Product Code - {!prod.ProductCode}<br/>
                            Product Price - ${!prod.Price__c}
                            <br/><br/>
                        </aura:iteration>
                    </div>
                </div>
                <div class="slds-modal__content slds-p-around--medium">
                    <div class="slds-align_absolute-center">
                        <b>Total price is - ${!v.total}</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <lightning:button onclick="{!c.billingProcess}" label="Send for billing" variant="brand"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="slds-backdrop slds-backdrop--open"></div>
    </div>
    
    {!v.body}
</aura:component>

Thank you.
​​​​​​​
Regards,
Payel