Create Modal/Popup in Lightning using aura method

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 modal and almost all methods are probably similar. We will discuss one of the methods here. To see another method, scroll below.

What is Aura: method?

aura:method in lightning is used to call the method of child controller and performing some action. Aura:method is written in child controller and attributes to be passed to child controller is defined inside it. Now parent controller can simply call this aura:method and pass arguments to it.

Working Demo:

lightning modal using aura method

Requirement:

Method-1: Create Modal Box using Aura:method

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. Also, in the right sidebar, click on Controller to create its file.

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.

Finally, our component is now ready to use. Go ahead and run this code. This aura:method can e invoked by any component which placed child component in its markup. Just call its method and pass the parameters to change its content. Above all, It’s a great reusability of code. Besides this, you can use these alternate methods too to use modal in lightning.

Method-2: Create Modal Box within a single component

Create Modal within a single component

Method-3: Create Modal Box by the Dynamic component creation

Create Modal using Dynamic component creation

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

Cheers :)…

Leave a Reply

avatar
  Subscribe  
Notify of