Create Modal/Popup in Lightning by Dynamic component creation

So what exactly a modal is ???

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

Requirement:

Method-1: Create Modal Box by the Dynamic component 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.

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

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

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

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

Our component 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 reusability.

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

 

Method-2: Create Modal Box within a single component

Create Modal within a single component

Method-3: Create Modal Box using Aura:method

Create Modal and use it by aura:method

Comment below and let me know if you have any issues/query.

Cheers :)…

Leave a Reply

Your email address will not be published. Required fields are marked *