Open lightning component in a modal on click of a button

Question

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>

isherwood · Accepted Answer · 2020-10-02 21:15:01Z

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 <c:CandidatePatientComponent> to be opened in a modal — Debarun Sengupta, Commented Mar 9, 2017 at 13:00
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. — Debarun Sengupta, Commented Mar 9, 2017 at 13:26
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. — vignesh, Commented Mar 9, 2017 at 13:29

Michal Vavra · Accepted Answer · 2017-06-25 14:44:37Z

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>

Stack Exchange Network

Open lightning component in a modal on click of a button

2 Answers 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
lightning-aura-components
.

Hot Network Questions

Open lightning component in a modal on click of a button

2 Answers 2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged lightning-aura-components.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
lightning-aura-components
.