1

I have a quick action button that calls an aura lightning component that calls an embedded LWC.

Quick action Aura:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader" access="global" >
    <aura:html tag="style">
        .slds-modal__content{
        height:unset !important;
        max-height:unset !important;
        }
        .slds-modal__container{
        width:60% !important;
        max-width:60% !important;
        }
    </aura:html>
    
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- Modal/Popup Box Header Starts here-->
            <header class="slds-modal__header">
                <lightning:buttonIcon iconName="utility:close"
                                      onclick="{! c.handleCloseQuickAction }"
                                      alternativeText="close"
                                      variant="bare-inverse"
                                      class="slds-modal__close"/>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!$Label.c.code_Title}</h2>
            </header>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <c:codeGeneratoLWC recordId="{!v.recordId}"/>
            </div>
        </div>
    </section>
</aura:component>

LWC HTML:

<template>
    <template if:true = {isSame}>
            <lightning-card>
                <div class="slds-align_absolute-center" style="height:3rem">{label.cfSame}</div>
            </lightning-card>
    </template>
    <template if:true = {isDifferent}>
        <lightning-card>
            <div class="slds-align_absolute-center" style="height:3rem">{label.cfDifferent}</div>
            <div class="slds-m-around_medium"> 
                <table  class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">  
                    <thead>  
                        <tr class="slds-text-heading_label">  
                            <th scope="col">  
                                <div class="slds-truncate slds-border_right" style = "white-space: pre-wrap" title={label.cfInserted}>{label.cfInserted}</div>  
                            </th>
                            <th scope="col">  
                                <div class="slds-truncate" style = "white-space: pre-wrap" >{codeExisting}</div>  
                            </th>
                        </tr>
                        <tr class="slds-text-heading_label">
                            <th scope="col">  
                                <div class="slds-truncate slds-border_right" style = "white-space: pre-wrap" title={label.cfCalculated}>{label.cfCalculated}</div>  
                            </th>
                            <th scope="col">  
                                <div class="slds-truncate" style = "white-space: pre-wrap" >{codeGenerated}</div>  
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </lightning-card>
    </template>
    <template if:true = {isError}>
        <lightning-card>
            <div class="slds-align_absolute-center" style="height:3rem">{errorMsg}</div>
        </lightning-card>
        
    </template>

    <div class="slds-align_absolute-center" style="height:5rem">
        <lightning-button variant="brand" label={label.cancel} title={label.cancel} onclick={handleCancel} class="slds-m-left_x-small"></lightning-button>
        <lightning-button variant="brand" label={label.save} title={label.save} onclick={handleSave} class="slds-m-left_x-small"></lightning-button> 
    </div>
 </template>

I get the following when I click the button:enter image description here

As can be seen from the above image I am getting 2 modals, one of LWC (the one with greyed boxes) and the other of Aura (behind the LWC a wide, thin modal). I would like to show only the LWC modal. How can I remove the other one in the background?

1

I found the solution in this blog. You can hide the Aura Modal using the CSS in the blog and the rest is straight forward.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.