Apex Code Development You need to sign in to do that
Don't have an account?
Michael M Turn lightning:card into modal window
Hello, I have a lightning component that uses liglhtning:card. I need this part of the component to pop up as a small modal window. Is that possible? Here is the snipper from the component:
<aura:if isTrue="{!v.displayRecordTypes}">
<lightning:card>
<div class="slds-align_absolute-center" >
<lightning:formattedText class="inlineTitle slds-p-horizontal--medium slds-text-heading--medium" value="New Lead" />
</div>
<hr/>
<lightning:formattedText class="slds-p-horizontal--medium" value="Select a record type"/>
<div class="slds-p-around--medium">
<div class="slds-p-left_xx-large">
<aura:iteration items="{!v.recordTypes}" var="item">
<lightning:input type="radio" class="slds-radio" label="{!item.Name}" aura:id="radioId" name="{!item.Id}" onclick="{!c.onSelect}" />
<div class="slds-p-left_xx-large">
<lightning:formattedText value="{!item.Description}" />
</div>
<br/>
</aura:iteration>
</div>
</div>
<footer>
<div class="modal-footer slds-modal__footer attach-to-bottom">
<lightning:button label="Cancel" onclick="{!c.cancelDialog}"/>
<lightning:button label="Next" variant="brand" onclick="{!c.createNewRecord}" disabled="{!v.selectedRecordTypeId==null}"/>
</div>
</footer>
</lightning:card>
</aura:if>
<aura:if isTrue="{!v.displayRecordTypes}">
<lightning:card>
<div class="slds-align_absolute-center" >
<lightning:formattedText class="inlineTitle slds-p-horizontal--medium slds-text-heading--medium" value="New Lead" />
</div>
<hr/>
<lightning:formattedText class="slds-p-horizontal--medium" value="Select a record type"/>
<div class="slds-p-around--medium">
<div class="slds-p-left_xx-large">
<aura:iteration items="{!v.recordTypes}" var="item">
<lightning:input type="radio" class="slds-radio" label="{!item.Name}" aura:id="radioId" name="{!item.Id}" onclick="{!c.onSelect}" />
<div class="slds-p-left_xx-large">
<lightning:formattedText value="{!item.Description}" />
</div>
<br/>
</aura:iteration>
</div>
</div>
<footer>
<div class="modal-footer slds-modal__footer attach-to-bottom">
<lightning:button label="Cancel" onclick="{!c.cancelDialog}"/>
<lightning:button label="Next" variant="brand" onclick="{!c.createNewRecord}" disabled="{!v.selectedRecordTypeId==null}"/>
</div>
</footer>
</lightning:card>
</aura:if>
<aura:if isTrue="{!v.displayRecordTypes}"> <section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header slds-modal__header_empty"> </header> <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1"> <lightning:card> <div class="slds-align_absolute-center" > <lightning:formattedText class="inlineTitle slds-p-horizontal--medium slds-text-heading--medium" value="New Lead" /> </div> <hr/> <lightning:formattedText class="slds-p-horizontal--medium" value="Select a record type"/> <div class="slds-p-around--medium"> <div class="slds-p-left_xx-large"> <aura:iteration items="{!v.recordTypes}" var="item"> <lightning:input type="radio" class="slds-radio" label="{!item.Name}" aura:id="radioId" name="{!item.Id}" onclick="{!c.onSelect}" /> <div class="slds-p-left_xx-large"> <lightning:formattedText value="{!item.Description}" /> </div> <br/> </aura:iteration> </div> </div> </lightning:card> </div> <footer class="slds-modal__footer"> <lightning:button label="Cancel" onclick="{!c.cancelDialog}"/> <lightning:button label="Next" variant="brand" onclick="{!c.createNewRecord}" disabled="{!v.selectedRecordTypeId==null}"/> </footer> </div> </section> </aura:if>All Answers
<aura:if isTrue="{!v.displayRecordTypes}"> <section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header slds-modal__header_empty"> </header> <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1"> <lightning:card> <div class="slds-align_absolute-center" > <lightning:formattedText class="inlineTitle slds-p-horizontal--medium slds-text-heading--medium" value="New Lead" /> </div> <hr/> <lightning:formattedText class="slds-p-horizontal--medium" value="Select a record type"/> <div class="slds-p-around--medium"> <div class="slds-p-left_xx-large"> <aura:iteration items="{!v.recordTypes}" var="item"> <lightning:input type="radio" class="slds-radio" label="{!item.Name}" aura:id="radioId" name="{!item.Id}" onclick="{!c.onSelect}" /> <div class="slds-p-left_xx-large"> <lightning:formattedText value="{!item.Description}" /> </div> <br/> </aura:iteration> </div> </div> </lightning:card> </div> <footer class="slds-modal__footer"> <lightning:button label="Cancel" onclick="{!c.cancelDialog}"/> <lightning:button label="Next" variant="brand" onclick="{!c.createNewRecord}" disabled="{!v.selectedRecordTypeId==null}"/> </footer> </div> </section> </aura:if>