• I have two components
  • Component A : Display's the list of Account, on click of account name it fires a event which passes Accountid to Component B.
  • Component B - It listens the event and Displays the Contact based on the AccountId attribute
  • I want to display Component B on the Modal

2 Answers 2


So try this. I guess your contacts table will be in somewhere. move all contact table code inside the lightning model tags

check this codes https://www.lightningdesignsystem.com/components/modals/

and when the page loads then set the model display to none.

when you click on any of the account, you may call a controller to get all the associated contacts. once all the contact records received. Just get the model div and change the style display none to block.

This way you show the model.. And

you can use

<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open">
 <!--set of your code--> 

here you can see slds-fade-in-open this css with display the model.

.slds-fade-in-close class will hide the model


Here is the detail blogpost showing how you can achieve this

The core is to use Application events to handle model open and close

The modal component will have something like below

<div class="slds">

 <div aria-hidden="true" role="dialog" class="slds-modal slds-modal--large slds-fade-in-hide" aura:id="modaldialog">

 <!--Other markups-->

<div class="slds-backdrop slds-backdrop--hide" aura:id="backdrop">



The Js controller code for Hide and Show model will be as below

showOppmodal: function(component, event, helper) {
     //Toggle CSS styles for opening Modal

hideModal : function(component, event, helper) {
     //Toggle CSS styles for hiding Modal

The helper code is as below

toggleClass: function(component,componentId,className) {
    var modal = component.find(componentId);

toggleClassInverse: function(component,componentId,className) {
    var modal = component.find(componentId);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .