1

I have created a lightning component custom action which will open a modal dialog. However, when I click the button, the dialog looks like below:

enter image description here

The dialog is okay but I am wondering where are the white and grey backgrounds coming from?

I have checked the developer tool in chrome for quite a while but haven't got a clue yet. I don't think it is coming from my code but I still paste it here:

<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <div aura:id="editDialog" role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h2 class="slds-text-heading--medium">Are you sure you want to deactivate this order?</h2>
            </div>
            <div class="slds-modal__footer">                
                <lightning:button variant="neutral" label="Cancel" onclick="{!c.cancelDialog}"/>
                <lightning:button variant="brand" label="Submit" onclick="{!c.deactivateOrder}" />
            </div>
        </div>
    </div>
</aura:component>

I don't have any custom css for this one yet. Any suggestions?

1 Answer 1

4

The force:lightningQuickActionWithoutHeader provides the box with the close button and semi-transparent black background. The slds-modal__container is providing the other semi-transparent black box (the one that goes from top to bottom). The container is not meant to be used in a Quick Action box.

3
  • Thank you for that. I am a bit confused by which one provides the smaller but darker layer of transparent background? And more importantly, how should I fix this issue?
    – Lance Shi
    Oct 16, 2018 at 22:58
  • I think I got it now. I shouldn't be using a modal for the action.
    – Lance Shi
    Oct 16, 2018 at 23:04
  • @LanceShi Yeah, that's what I was trying to say.
    – sfdcfox
    Oct 16, 2018 at 23:05

You must log in to answer this question.

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