Create Modal/Popup In Lightning Salesforce

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 it. We will discuss one of the methods here.

Working Demo:

modal-popup-lightning

 

Method-1: Create Modal Box within a single component

We will use a single component to show parent and child markup.

 

Create the LightningModal 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 LightningModal.cmp and paste the below code.

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

We used standard SLDS (Salesforce Lightning Design System) to give styling to our component. You can find it here SLDS.

Step-3: Call the LightningModal component in the lightning app.

So our component is ready to use but wait can you use this component in future if you want to create a Popup again?

Ummmm… Definitely not, the whole code is present in parent body so we cannot use this in general. To make a general component which can be used across all components see below post.

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

Create Modal using Dynamic component creation

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 :)…

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments