Sample Component:
<!-- Name: Sample.cmp --> <aura:component > <div class="slds-m-around_xx-large"> <label class="mdp-form-user-element__label" id="enteredName"></label><br/><br/> <lightning:button label="Add Your Name" variant="brand" onclick="{!c.handlePopup}"/> </div> {!v.body } </aura:component>
Sample Component JS Controller:
({ handlePopup : function(component, event,helper) { //Create Dynamic Component $A.createComponent('c:SampleModalPopup', { title: 'Please enter your name', }, function attachModal(modalCmp, status) { if (component.isValid() && status === 'SUCCESS') { var body = component.get("v.body"); body.push(modalCmp); component.set("v.body", body); } }); } })
ModalPopup Component:
<!-- Name: ModalPopup.cmp --> <aura:component > <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="title" type="String" /> <div aura:id="modalDiv"> <div role="dialog" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <div class="slds-modal__header"> <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCloseModal}"> X<span class="slds-assistive-text">Close</span> </button> <h1 class="slds-text-heading--medium">{!v.title}</h1> </div> <!--Modal Box Header--> <div class="slds-modal__content slds-p-around--medium"> <input type="text" placeholder="Please enter your name" id="userName" autofocus="autofocus" class="slds-input"/> </div> <!--Modal Box Button--> <div class="slds-modal__footer"> <lightning:button label="Submit" class="slds-button_brand" onclick="{!c.handleSubmit}" /> <lightning:button label="Cancel" class="slds-button" onclick="{!c.handleCloseModal }" /> </div> </div> </div> <div class="slds-backdrop slds-backdrop--open"></div> </div> </aura:component>
ModalPopup JS Controller:
({ doInit : function(component, event, helper) { console.log('Modal Popup Load'); }, handleSubmit : function(component, event, helper){ var userName = document.getElementById("userName"); var enteredName = document.getElementById("enteredName"); enteredName.innerHTML = userName.value; var popupWindow = component.find('modalDiv').getElement(); if(popupWindow){ popupWindow.style.display = 'none'; } }, handleCloseModal : function(component, event, helper){ var popupWindow = component.find('modalDiv').getElement(); if(popupWindow){ popupWindow.style.display = 'none'; } } })