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?

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.

  • 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 '18 at 22:58
  • I think I got it now. I shouldn't be using a modal for the action. – Lance Shi Oct 16 '18 at 23:04
  • @LanceShi Yeah, that's what I was trying to say. – sfdcfox Oct 16 '18 at 23:05

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.