In salesforce we can have only one popup at a time. So, if you are using a popup, then you have to use a work around to display popup.
Here in this blog, I will show you how to display a popup within a popup. We will create 2 components in this demo.
- Child Component (Second popup modal)
- Parent Component (Actual Popup modal)
So, when user chicks on a button we will display a pop-up window and when user clicks on success button we will display another child pop-up modal.
- Child Component
Child component will not have any much information, this will just display a message that is passed from parent which will cover how to pass parameters to child modal as well.
Child_Component.cmp
<aura:component >
<aura:attribute name="a_Message" type="String" />
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" 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">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">CHILD POPUP</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p> This is a simple child popup modal.</p>
<p> This is just a small demo.</p>
<p> {!v.a_Message} </p>
</div>
<footer class="slds-modal__footer slds-modal__footer_directional">
<lightning:button variant="brand-outline" label="Cancel" title="Cancel" onclick="{! c.handleClick }" />
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:component>
Child_ComponentController.js
({
handleClick : function(component, event, helper) {
component.destroy();
}
})
Here we are displaying a_Message attribute value in the popup body section.
component.destroy();
is used to close the popup window. To store and send back information from child to parent, you can use component events for the same.
2) Parent Component.
This will have actual code on how to display popup and also call child popup
Parent_Component.cmp
<aura:component >
<aura:attribute name="showModal" type="boolean" default="false"/>
<lightning:button label="Neutral" title="Neutral action" onclick="{! c.handleClick }"/>
<aura:if isTrue="{!v.showModal}" >
<section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_large" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
<div class="slds-modal__container">
<!-- ******* HEADER SECTION ******* -->
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">www.Salesforce.fun</h2>
</header>
<!-- ******* BODY SECTION ******* -->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<p>This is a demo model to demonstrate how a popup works. </p>
<br/>
<p>We will see how we can bring on pop up within current popup.</p>
<br/>
<p>We need to create a separate component, and create a dynamic component to display a new popup above the current one.</p>
<p>Current component is Parent component. I will create a new component as child component. to display success message.</p>
<br/>
<p>Multiple popup's cannot be displayed directly as per salesforce. This is just a small workaround.</p>
</div>
<!-- ******* FOOTER SECTION ******* -->
<footer class="slds-modal__footer">
<lightning:button variant="brand-outline" label="Cancel" title="Cancel" onclick="{! c.handleClick }" />
<lightning:button variant="success" label="success" title="Save" onclick="{! c.handleSuccess }"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
<!-- ******* CHILD POP-UP SECTION ******* -->
<div aura:id="showChildModal"> </div>
</aura:if>
</aura:component>
Parent_ComponentController.js
({
handleClick : function(component, event, helper) {
component.set("v.showModal",true);
},
handleSuccess : function(component, event, helper){
$A.createComponent(
"c:Child_Component",{
"a_Message" : "Success Message From Parent Component."
},
function(modalComponent, status, errorMessage){
//Add the new button to the body array
if (status === "SUCCESS") {
var body = component.find('showChildModal').get("v.body");
body.push(modalComponent);
component.find('showChildModal').set("v.body", body);
}
else if (status === "INCOMPLETE") {
console.log("No response from server or client is offline.")
// Show offline error
}
else if (status === "ERROR") {
console.log("Error: " + errorMessage);
// Show error message
}
}
);
}
})
If component is loaded, the the status will have success and modalComponent (which has the actual component DOM code) will be loaded and displayed as a pop-up in showChildModal section.
We are also passing a string text to the child component’s attribute a_Message as a parameter.
Output
Click the image to see demo in full screen.
Akhil Kulkarni 