Lightning quick action modal styling of background using SLDS

Question

I have quick action that opens an aura lightning component. I'm basically trying to mimic the standard delete confirm dialog popup. I have the component working, but the SLDS styling is correct.

Here is a an example:

On the right side you'll see how the lightning component looks and on the left is the standard delete UI. I'd like to get the background to look like the standard delete.

Here is code for the component:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="SalesOrderCancelOrder" access="global">

    <aura:attribute name="recordId" type="String" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="order" type="SalesOrder__c" />
    <aura:attribute name="msg" type="String" />
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_medium" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
        <div class="slds-modal__container">
            <lightning:spinner aura:id="Spinner" alternativeText="Loading" size="medium" variant="brand"/>
          <header class="slds-modal__header">
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Cancel Order</h2>
          </header>
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>Are you sure you want to cancel this order?</p>
          </div>
          <footer class="slds-modal__footer">          
            <lightning:button name='No' label='No' onclick='{!c.handleConfirmDialogNo}'/>
            <lightning:button variant="brand" name='Yes' label='Yes' onclick='{!c.handleConfirmDialogYes}'/>
          </footer>
        </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
</aura:component>

I was referencing the lightning modal examples in the documentation. Is it possible to get the background of the modal to look like the standard delete?

Answer 1

So, when you use an Aura component fired from a Quick Action, it already puts it in a modal. You can see the standard modal (with a "blank" body) behind your slds modal...

Just get rid of the outer HTML elements in your code section, div class="slds-modal__container", div class="slds-backdrop ..." and you should be good to go.

Also, since your Aura component is being nested into the standard modal, the footer and some minor padding / formatting may be a little different from the standard.