Modal not displaying correctly

Question

I created an Aura Component for our Lightning Opportunity page that will replace our URL hacking for classic to pull information to a new asset record. I added a Modal to select the Record type before firing force:createRecord. createRecord displays it's modal correctly, but it is displaying the record type Modal incorrectly.

cmp Code:

    <div role="dialog" 
         tabindex="-1" 
         aria-labelledby="modal-heading-01"
         aria-describedby="modal-content-id-1"
         class="slds-modal slds-modal_small"
         aura:id="myModal">
        <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.closeModal}">
                        X<span class="slds-assistive-text">Cancel</span>
                    </button>
                    <h2 id="modal-heading-01" class="slds-text-heading--medium">New Asset</h2>
                </div>
                <div class="slds-modal__content slds-p-around--medium" id="modal-content-id-1">
                    <div class="slds-grid slds-wrap">
                        <div class="slds-size--1-of-2 slds-large-size--1-of-2">
                             <div class="slds-align--absolute-center">Select a Record Type</div>                            
                        </div>
                        <div class="slds-size--1-of-2 slds-large-size--1-of-2">
                            <ui:inputSelect aura:id="selectid">
                                <aura:iteration items="{!v.lstOfRecordType}" var="contact">                            
                                    <ui:inputSelectOption text="{!contact}" label="{!contact}"  />
                                </aura:iteration>
                            </ui:inputSelect>
                        </div>&nbsp; &nbsp;
                    </div>                   
                </div>
            <div class="slds-modal__footer">
                    <lightning:button class="slds-button slds-button--neutral" onclick="{!c.closeModal}">Cancel</lightning:button>
                    <lightning:button class="slds-button slds-button--brand" onclick="{!c.newAsset}">Next</lightning:button>
                </div>
            </div>
        </div>
        <div class="slds-backdrop" aura:id="myModal-Back"/>

Controller:

closeModal: function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.removeClass(modal, 'slds-fade-in-open');
    $A.util.removeClass(modalBackdrop, 'slds-fade-in-open');
    },
 
   openModal: function(component, event, helper) {
   //find modal using aura id
    var modal = component.find("myModal");
    var modalBackdrop = component.find("myModal-Back");

   // Now add and remove class
    $A.util.addClass(modal, 'slds-fade-in-open');
    $A.util.addClass(modalBackdrop, 'slds-fade-in-open');
   },

CSS:

.THIS .slds-backdrop {
    background-color: blue;
}

It's not the backdrop, as I set that to Blue, so I'm not sure what is causing this.

Answer 1

Stepping back a bit on this: why not use a URL with pre-filled fields in Lightning?

This approach in classic was common, but unsupported, so I understand the hesitancy. But in Lightning, as of the Spring 20 release (last year), this is an actually supported approach. Source

/lightning/o/[OBJECT_API_NAME]/new?defaultFieldValues=
    Name={!URLENCODE('value')},
    Custom_Field_Api_Name__c={!URLENCODE('value')}

add useRecordTypeCheck=1 if you don't want to skip the record type selection screen

/lightning/o/[OBJECT_API_NAME]/new?useRecordTypeCheck=1&defaultFieldValues=
    Name={!URLENCODE('value')},
    Custom_Field_Api_Name__c={!URLENCODE('value')}