Create Lightning Modal/Popup | Dynamic component creation

So what exactly a lightning modal is ???

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


Method-1: Create Lightning Modal 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.