Open lightning component in a modal on click of a button

  • I am not able to open another lightning component in a modal by simply referencing the component

    <div class="slds-modal__content slds-p-around--medium">
        <div>
            <!--<ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!c.selection}">
            </ui:inputSelect>-->
            <c:CandidatePatientComponent></c:CandidatePatientComponent>
         </div>
    </div>
    

    Please let me know how to achieve this.

    //Code that I tried

    <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}">
    
                        <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:LeadCreation/>
                    </div>
                </div>
                <div class="slds-modal__footer">
                </div>
            </div>
        </div>
        <div class="slds-backdrop " aura:id="Modalbackdrop"></div>
    </aura:component>
    

    Controller code

    ({
        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'); 
        }
    
    })
    

    Component B code

    <aura:component controller="LeadCreateController" 
                    implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" 
                    access="global" >
    
    
        <!-- Define Attribute-->
        <aura:attribute name="candidate" type="Lead" default="{'sobjectType': 'Lead',
                             'FirstName': '',
                             'LastName': '',
                             'Country': '',
                               'Company':''                               
                           }"/>
        <div class="container-fluid">
            <h3>Please Enter The Candidate Information</h3>
            <div class="form-group">
                <label>First Name</label>
                <ui:inputText class="form-control" value="{!v.candidate.FirstName}"/>
            </div>
            <div class="form-group">
                <label>Last Name</label>
                <ui:inputText class="form-control" value="{!v.candidate.LastName}"/>
            </div>
            <div class="form-group">
                <label>Country</label>
                <ui:inputText class="form-control" value="{!v.candidate.Country}"/>
            </div>
             <div class="form-group">
                <label>Company</label>
                <ui:inputText class="form-control" value="{!v.candidate.Company}"/>
            </div>
    
    
        </div>
        <div class="col-md-4 text-center">
            <ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>
      </div>
    </aura:component>
    
  • vignesh

    vignesh Correct answer

    4 years ago

    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'); 
        }
        
    })
    

    Still no luck....the above component is getting rendered on page load.I need to be opened in a modal

    @DebarunSengupta which code?

    @DebarunSengupta I Edited the post .

    I tried with the above code but still on page load the component b is getting rendered.It should only be opened when the open modal button is pressed.Not sure where I am missing.

    can you please edit the question what code you trying now this might help to resolve your issue.Did you tried with example code I provided above that code match your crieteria that when button click it will open a modal.

    I edited the post with my code.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM