How to display a Modal/Popup on click button using aura method in lightning component | In lightning component how to display modal popup with a form inside using aura method in salesforce component

Hey guys, today in this post we are going to learn about how to display a Modal/Popup on click button with a form inside a lightning component using aura method.

Don’t forget to check out:- Creating a Lightning Datatable with Row Actions and Display a Modal Popup on Click View Icon Button in Salesforce Lightning Web Component – LWC Click Here For More Information

Files we used in this post example:-

modalPopupaApp.app	Lightning Application	It is used for call the component to preview on browser.
modalPopupParent.cmp	Lightning Component	It is parent component of "childPopup.cmp".
modalPopupParentController.js	Lightning Component Controller	It is used for click functionality that gets the value from child component to aura method.
childPopup.cmp	Lightning Component	It is a child component of "modalPopupParent.cmp" and hold aura method with action method.
childPopupController.js	Lightning Component Controller	It is used for display and close the Modal/Popup.

Final Output

You can download file directly from github by Click Here.

👉 Download Free Ebook →

👉 Get Free Course →

Challenges in your career

🎯 If You Are Facing Any Of These 6 Challenges in your career.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

Other related post that would you like to learn in Salesforce

Step 1:- Create Lightning Application : modalPopupaApp.app

From Developer Console >> File >> New >> Lightning Application

modalPopupaApp.app [Component Application File]

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

```
    <c:modalPopupParent.cmp/>
```
```
</aura:application>
```

Step 2:- Create Lightning Component : modalPopupParent.cmp

From Developer Console >> File >> New >> Lightning Component

modalPopupParent.cmp [Lightning Component File]

```
   <aura:component>    
```

    <c:childPopup aura:id="eventPopId"/>

```
    <div class="slds-p-around--medium">
```

          <button class="slds-button slds-button--brand" onclick="

      {!c.OpenEventPopup}">Open Event Popup</button>

```
 
```
```
<br/><br/>
```
```
   
```

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

```
 
```
```
            <br/><br/>
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>

                        <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>

                        <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>

                        <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>

                        <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>

                        <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>

                        <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

                    <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>

```
                </div>
```
```
    </div>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
 
```
```
     </div>
```
```
  </aura:component>
```

Step 3:- Create Lightning Component : modalPopupParentController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

modalPopupParentController.js [JavaScript Controller]

```
   ({
```

	OpenEventPopup : function(component, event, helper) {

        var modalFade1 = component.find('eventPopId');

        component.find("eventPopId").submitDR(modalFade1);

```
	},    
```
```
  })
```

Step 4:- Create Lightning Component : childPopup.cmp

From Developer Console >> File >> New >> Lightning Component

childPopup.cmp [Lightning Component File]

   <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

```
 
```

    <aura:method name="submitDR" action="{!c.openEventPopup}">

        <aura:attribute name="showModalFade" type="string"/>

        <aura:attribute name="darkModalBackdrop" type="String"/>

```
    </aura:method>
```
```
 
```

    <section role="dialog" class="slds-modal" aura:id="modalFade">

        <div class="slds-modal__container">

            <header class="slds-modal__header">

                <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeEventPopup}">

                    <c:svg class="slds-button__icon slds-button__icon--large" ariaHidden="true" xlinkHref="/resource/SLDS090/assets/icons/utility-sprite/svg/symbols.svg#close" />

```
                </button>
```
```
 
```

                <h2 class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>

```
            </header>
```

            <div class="slds-modal__content slds-p-around_medium">

```
                <div class="slds">
```

                    <div class="slds-grid slds-wrap">

                        <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">

                            <div class="slds-form-element">

                                <label class="slds-form-element__label">Name</label>

                                <div class="slds-form-element__controller">

                                    <ui:inputText class="slds-input" value="" aura:id="userName"/>

```
                                </div>
```
```
                            </div>
```

                        </div>

```
                    </div>
```
```
 
```

                    <div class="slds-grid slds-wrap">

                        <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">

                            <div class="slds-form-element">

                                <label class="slds-form-element__label">Email</label>

                                <div class="slds-form-element__controller">

                                    <ui:inputEmail class="slds-input" value="" aura:id="userEmail"/>

```
                                </div>
```
```
                            </div>
```
```
                        </div>
```
```
 
```
```
                    </div>
```
```
 
```

                    <div class="slds-grid slds-wrap">

                        <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">

                            <div class="slds-form-element">

                                <label class="slds-form-element__label">Phone</label>

                                <div class="slds-form-element__controller">

                                    <ui:inputPhone class="slds-input" value="" aura:id="userPhone"/>

```
                                </div>
```
```
                            </div>
```
```
                        </div>
```
```
 
```
```
                    </div>
```
```
 
```

                    <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">

                        <div class="slds-form-element">

                            <label class="slds-form-element__label">State</label>

                            <div class="slds-form-element__controller">

                                <ui:inputSelect class="slds-select" aura:id="userState" value="">

                                    <ui:inputSelectOption text="--None--"/>

                                    <ui:inputSelectOption text="Delhi"/>

                                    <ui:inputSelectOption text="Haryana"/>

                                    <ui:inputSelectOption text="Karnataka"/>

                                </ui:inputSelect>

```
                            </div>
```
```
                        </div>
```
```
                    </div>
```
```
 
```

                    <div class="slds-form--inline slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">

                        <div class="slds-form-element" aura:id="redCheck">

                            <div class="slds-form-element__control">

                                <div class="slds-checkbox">

                                    <input type="checkbox" name="options" aura:id="checkbox1" id="checkbox1" value="" />

                                    <label class="slds-checkbox__label" for="checkbox1">

                                        <span class="slds-checkbox_faux"></span>

                                        <span class="slds-form-element__label">Red</span>

                                    </label>

```
                                </div>
```

                            </div>

```
                        </div>
```
```
 
```

                        <div class="slds-form-element" aura:id="greenCheck">

                            <div class="slds-form-element__control">

                                <div class="slds-checkbox">

                                    <input type="checkbox" name="options" aura:id="checkbox2" id="checkbox2" value=""  />

                                    <label class="slds-checkbox__label" for="checkbox2">

                                        <span class="slds-checkbox_faux"></span>

                                        <span class="slds-form-element__label">Green</span>

                                    </label>

```
                                </div>
```

                            </div>

```
                        </div>
```
```
 
```
```
                    </div>        
```
```
 
```

                    <div class="slds-form--inline slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium">

                        <div class="slds-form-element">

                            <div class="slds-form-element__control">

                                <span class="slds-radio">

                                    <input type="radio" id="radio1" value="" name="default" checked="" />

                                    <label class="slds-radio__label" for="radio1">

                                        <span class="slds-radio_faux"></span>

                                        <span class="slds-form-element__label">Radio Label One</span>

                                    </label>

                                </span>

```
                            </div>
```
```
                        </div>
```
```
 
```
```
 
```
```
                    </div>
```
```
                </div>
```
```
 
```
```
            </div>
```

            <footer class="slds-modal__footer">

                <button class="slds-button slds-button--destructive" onclick="{!c.closeEventPopup}">Cancel</button>

                <button class="slds-button slds-button_brand">Save</button>

```
            </footer>
```
```
        </div>
```
```
    </section>
```

    <div class="slds-backdrop" aura:id="modalBackdrop"></div>

```
 
```
```
</aura:component>
```

Step 5:- Create Lightning Component : childPopupController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

childPopupController.js [JavaScript Controller]

```
   ({
```

	openEventPopup : function(component, event, helper) {

		var modalFade = component.find('modalFade');

        var modalBackdrop = component.find('modalBackdrop');

```
 
```

        $A.util.addClass(modalFade,'slds-fade-in-open');

        $A.util.addClass(modalBackdrop,'slds-backdrop_open');

```
	},
```
```
 
```

    closeEventPopup : function(component, event, helper) {

		var modalFade = component.find('modalFade');

        var modalBackdrop = component.find('modalBackdrop');

```
 
```

        $A.util.removeClass(modalFade,'slds-fade-in-open');

        $A.util.removeClass(modalBackdrop,'slds-backdrop_open');

```
	},    
```
```
 
```
```
})
```

TechW3web:- To know more, Use this Link

Further post that would you like to learn in Salesforce

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

How do I close the modal pop in Aura component?

The correct way to do that is to save the promise returned by showCustomModal() as an aura:attribute and use that to close the modal.

How do I create a modal popup in LWC?

Creating the modal popup is so easy in LWC and it's just few minutes of tasks. Modal Popup creates with the various methods will discuss only one of the way here. Create the Custom Component using VS code. In javascript, you only need to add or change in the value of the property.

What is force recordData?

A force:recordData component defines the parameters for accessing, modifying, or creating a record using Lightning Data Service. You have granular control on how you want to display or render the data in your custom component.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net