Create Lightning Modal/Popup | Dynamic component creation

So what exactly a lightning modal is ???

Contents

Working Demo:Method-1: Create Lightning Modal by the Dynamic component creation Method-2: Create Modal Box within a single component Method-3: Create Modal Box using Aura:method

A modal window is a graphical control element subordinate to an application’s main window. It opens a small layer/window on top of the parent screen with a slight backdrop so that you can see the parent too. The advantage of this box is that you don’t need to navigate between pages, instead, change data in it close it and you are back on parent screen.

Modals/pop-ups can be created easily with few lines of code. There are various ways to create a it. We will discuss one of the methods here.

Working Demo:

lightning modal using dynamic creation

To use this method, we need 2 components, parent and child.

Create the LightningModalParent and LightningModalChild lightning component.

For creating a new lightning component navigate to Developer Console > File > New > Lightning Component

Enter Name & Description and click Submit. Now component markup file will open by default. In the right sidebar, click on Controller to create it.

Step-1: Open the LightningModalParent.cmp and paste the below code.


<aura:component >
	<!-- Button to open the modal -->
	<lightning:button variant="brand" label="Open Dynamic Modal" title="Open Modal" onclick="{! c.openModal }" />
	<!-- Div to append the child component markup -->
	<div aura:id="showChildModal" ></div>
</aura:component>

<aura:component >

<lightning:button variant="brand" label="Open Dynamic Modal" title="Open Modal" onclick="{! c.openModal }" />

</aura:component>

Step-2: Open the LightningModalParentController.js and paste the below code.


({
	openModal : function(component, event, helper) {
        //Dynamic creation of lightningModalChild component and appending its markup in a div
		$A.createComponent( 'c:LightningModalChild', {
                'headerText' : 'This text is passed from Parent'
            },
            function(modalComponent, status, errorMessage) {
                if (status === "SUCCESS") {
                    //Appending the newly created component in div
                    var body = component.find( 'showChildModal' ).get("v.body");
                    body.push(modalComponent);
                    component.find( 'showChildModal' ).set("v.body", body);
                } else if (status === "INCOMPLETE") {
                	console.log('Server issue or client is offline.');
                } else if (status === "ERROR") {
                	console.log('error');
                }
            }
        );
	}
})

({

openModal : function(component, event, helper) {

//Dynamic creation of lightningModalChild component and appending its markup in a div

$A.createComponent( 'c:LightningModalChild', {

'headerText' : 'This text is passed from Parent'

function(modalComponent, status, errorMessage) {

if (status === "SUCCESS") {

//Appending the newly created component in div

var body = component.find( 'showChildModal' ).get("v.body");

body.push(modalComponent);

component.find( 'showChildModal' ).set("v.body", body);

} else if (status === "INCOMPLETE") {

console.log('Server issue or client is offline.');

} else if (status === "ERROR") {

console.log('error');

}

);

}

})

Step-3: Open the LightningModalChild.cmp and paste the below code.


<aura:component >
	<!-- Attriute to show header Text -->
	<aura:attribute name="headerText" type="String" default="default Header" />
	<!-- Modal Code -->
	<div class="demo-only" style="height: 600px;">
		<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">
		    	<!-- Modal Header -->
			    <header class="slds-modal__header">
			        <lightning:buttonIcon iconName="utility:close" class="slds-modal__close" size="large" variant="bare" alternativeText="Close" onclick="{! c.closeModal }"/>
			        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!v.headerText}</h2>
			     </header>
			     <!-- Main Body of Modal -->
			      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
			        <p>This is the body of this lightning modal. The markup code of this lightning modal remains in the seprate lightning component and when 'open modal' button is clicked, it is dynamically called/created and appended in parent's body.</p>
			        <p>By clicking the close/cancel button we are just destroying the child component which will remove the markup of child component from parent body. This modal might sometime take a while to open but its advantage is its re-usable as it can be used in another component too.</p><br/>
			        <p><b>Did you find the dynamic component creation code tricky ???, see alternate methods to call it within a single line, see the link below.</b></p>
			    </div>
			    <!-- Footer of Modal -->
			    <footer class="slds-modal__footer">
			        <lightning:button variant="brand" label="Save" title="Save" onclick="{! c.handleSave }" />
			        <lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.closeModal }" />   
			    </footer>
		    </div>
		</section>
		<div class="slds-backdrop slds-backdrop_open"></div>
	</div>
</aura:component>

<aura:component >

<aura:attribute name="headerText" type="String" default="default Header" />

<lightning:buttonIcon iconName="utility:close" class="slds-modal__close" size="large" variant="bare" alternativeText="Close" onclick="{! c.closeModal }"/>

<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!v.headerText}</h2>

</header>

<p>This is the body of this lightning modal. The markup code of this lightning modal remains in the seprate lightning component and when 'open modal' button is clicked, it is dynamically called/created and appended in parent's body.</p>

<p>By clicking the close/cancel button we are just destroying the child component which will remove the markup of child component from parent body. This modal might sometime take a while to open but its advantage is its re-usable as it can be used in another component too.</p><br/>

<p><b>Did you find the dynamic component creation code tricky ???, see alternate methods to call it within a single line, see the link below.</b></p>

</div>

<lightning:button variant="brand" label="Save" title="Save" onclick="{! c.handleSave }" />

<lightning:button variant="brand" label="Cancel" title="Cancel" onclick="{! c.closeModal }" />

</footer>

</div>

</section>

</div>

</aura:component>

Step-4: Open the LightningModalChildController.js and paste the below code.


({
	closeModal : function(component, event, helper) {
		// when a component is dynamically created in lightning, we use destroy() method to destroy it.
		component.destroy();
	},

	// action to execute when save button is clicked
	handleSave : function(component, event, helper) {
		// We are showing an alert box here, you can perform any stuff here.
		alert('Do Some action on me');
		component.destroy();
	}
})

({

closeModal : function(component, event, helper) {

// when a component is dynamically created in lightning, we use destroy() method to destroy it.

component.destroy();

// action to execute when save button is clicked

handleSave : function(component, event, helper) {

// We are showing an alert box here, you can perform any stuff here.

alert('Do Some action on me');

component.destroy();

}

})

Step-5: Call the LightningModalParent component in the lightning app.


<aura:application extends="force:slds" access="global"> 
    <c:LightningModalParent />
</aura:application>

<aura:application extends="force:slds" access="global">

<c:LightningModalParent />

</aura:application>

Our lightning modal is now ready to use. Go ahead and run this code. This child component can be called from any lightning component and attributes are passed to change its content. It’s a great reusable component.

Did you find the dynamic component creation code tricky ??? Check out our another alternate method below.

Create Modal within a single component

Create Modal and use it by aura:method