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>
</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.