Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to display a Modal/Popup on click button using aura method in lightning component #14

Open
vijayk3327 opened this issue Jul 18, 2023 · 0 comments
Open

How to display a Modal/Popup on click button using aura method in lightning component #14

vijayk3327 opened this issue Jul 18, 2023 · 0 comments
Assignees
@vijayk3327
Labels
documentation Improvements or additions to documentation question Further information is requested

Comments

@vijayk3327
Copy link
Owner

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.

→ Get source code live demo link:-

Step 1:- Create Lightning Application : modalPopupaApp.app

<aura:application extends="force:slds"> <c:modalPopupParent.cmp/> </aura:application>

Step 2:- Create Lightning Component : modalPopupParent.cmp

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


Open Event Popup



        <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>

</aura:component>`

Step 3:- Create Lightning Component : modalPopupParentController.js
({ OpenEventPopup : function(component, event, helper) { var modalFade1 = component.find('eventPopId'); component.find("eventPopId").submitDR(modalFade1); }, })

Step 4:- Create Lightning Component : childPopup.cmp

` <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

` ({
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');
},

})`

→ Get source code live demo link:-
@vijayk3327 vijayk3327 added documentation Improvements or additions to documentation question Further information is requested labels Jul 18, 2023
@vijayk3327 vijayk3327 self-assigned this Jul 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@vijayk3327 vijayk3327

Labels
documentation Improvements or additions to documentation question Further information is requested
Projects
Lightning Aura Component
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@vijayk3327