Open lightning component in a modal on click of a button
In upper <div>
include slds-modal slds-fade-in-open
try this... refer to the LDS Modal docs for more details.
<div class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<div class="slds-modal__content slds-p-around--medium">
<div>
<c:CandidatePatientComponent></c:CandidatePatientComponent>
</div>
</div>
</div>
</div>
EDIT
I share a example code this might help to you.By clicking on button show another component inside a modal
ComponentA:
<aura:component >
<ui:button label="openmodal" press="{!c.openmodal}" />
<div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal">
<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}">
<c:svgIcon svgPath="/resource/slds/assets/icons/utility-sprite/svg/symbols.svg#close" size="small" />
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="header43" class="slds-text-heading--medium">Test Modal</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<div>
<c:componentB />
</div>
</div>
<div class="slds-modal__footer">
</div>
</div>
</div>
<div class="slds-backdrop " aura:id="Modalbackdrop"></div>
</aura:component>
InCOntroller:
({
closeModal:function(component,event,helper){
var cmpTarget = component.find('Modalbox');
var cmpBack = component.find('Modalbackdrop');
$A.util.removeClass(cmpBack,'slds-backdrop--open');
$A.util.removeClass(cmpTarget, 'slds-fade-in-open');
},
openmodal: function(component,event,helper) {
var cmpTarget = component.find('Modalbox');
var cmpBack = component.find('Modalbackdrop');
$A.util.addClass(cmpTarget, 'slds-fade-in-open');
$A.util.addClass(cmpBack, 'slds-backdrop--open');
}
})
The preferable approach is to have a component that renders modal window.
The code below renders modal window when the user clicks on the button and do not depend on CSS styling tricks.
A title is not required and you can define the control buttons in the Base component. It helps you, to have a component, the one you want to render in the modal window, logic-less.
Base Component
<aura:component description="Example usage of custom modal window for Lead record edit">
<aura:attribute name="lead" type="Lead" />
<aura:attribute name="showModalEditLead" type="Boolean" default="false" />
<aura:attribute name="showModalB" type="Boolean" default="false" />
<lightning:button label="Open Edit Lead Modal" onclick="{!c.handleModalEditLeadOpen}" />
<lightning:button label="Open Modal B" onclick="{!c.handleOpenModalB}" />
<c:CustomModalComponent title="Lead Edit" isActive="{!v.showModalEditLead}">
<!-- Content of the modal window -->
<c:CustomLeadEdit record="{!v.lead}" />
<aura:set attribute="footer">
<lightning:button variant="neutral" label="Cancel" onclick="{!c.handleModalEditLeadCancel}" />
<lightning:button variant="brand" label="Save" onclick="{!c.handleModalEditLeadSave}" />
</aura:set>
</c:CustomModalComponent>
<c:CustomModalComponent isActive="{!v.showModalB}">
Welcome to Modal B!
</c:CustomModalComponent>
</aura:component>
Base Controller
({
handleModalEditLeadOpen: function(component) {
component.set('v.showModalEditLead', true);
},
handleModalEditLeadCancel: function(component) {
component.set('v.showModalEditLead', false);
},
handleModalEditLeadSave: function(component, event, helper) {
/* Handle the Lead here */
component.set('v.showModalEditLead', false);
},
handleOpenModalB: function(component) {
component.set('v.showModalB', true);
}
})
CustomModal Component
<aura:component description="Component for rendering modal window" extensible="true">
<aura:attribute name="isActive" type="Boolean" default="false" required="true" />
<aura:attribute name="title" type="String" default="" required="false" />
<aura:attribute name="footer" type="Aura.Component[]" required="false" />
<div>
<aura:renderIf isTrue="{!v.isActive}">
<section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<header class="{!'slds-modal__header' + (empty(v.title) ? ' slds-modal__header slds-modal__header_empty' : '')}">
<lightning:buttonIcon alternativeText="Close" onclick="{!c.handleCancel}" iconName="utility:close" variant="bare" size="large" class="slds-modal__close slds-button_icon-inverse" />
<aura:renderIf isTrue="{!not(empty(v.title))}">
<h2 class="slds-text-heading_medium slds-hyphenate">{!v.title}</h2>
</aura:renderIf>
</header>
<div class="slds-modal__content slds-p-around--large" id="modal-content-id-1">
{!v.body}
</div>
<footer class="slds-modal__footer">
{!v.footer}
</footer>
</div>
</section>
</aura:renderIf>
<div class="{!'slds-backdrop ' + ((v.isActive) ? 'slds-backdrop_open' : 'slds-backdrop_close')}"></div>
</div>
</aura:component>
CustomModal Controller
({
handleCancel: function(component) {
component.set('v.isActive', false);
}
})
CustomLeadEdit Component
<aura:component description="Form for editing Lead record">
<aura:attribute name="record" type="Lead" required="true" />
<lightning:layout horizontalAlign="center">
<lightning:layoutItem size="12" flexibility="auto">
<ui:inputText label="First Name" value="{!v.record.FirstName}" />
</lightning:layoutItem>
<lightning:layoutItem size="12" flexibility="auto">
<ui:inputText label="Last Name" value="{!v.record.LastName}" />
</lightning:layoutItem>
</lightning:layout>
</aura:component>