Create Modal Popup Box In Lightning Component – Salesforce

<!--ModalPopupComponent-->
<aura:component>
<aura:attribute name="openModal" type="boolean" default="false"/>
<div class="slds-m-around--xx-large">
<button class="slds-button slds-button--brand" onclick="{!c.handleOpenModal}">Open Modal</button>
<aura:if isTrue="{!v.openModal}">
<!--Modal Box Start-->
<div role="dialog" class="slds-modal slds-fade-in-open ">
<div class="slds-modal__container">
<div class="slds-modal__header">
<h1 class="slds-text-heading--medium">Bvenkat Jeewesh</h1>
</div>
<!--Modal Box Header-->
<div class="slds-modal__content slds-p-around--medium">
<center> <p><b>
Welcome to Bvenkat Jeewesh Blog
</b>
</p></center>
</div>
<!--Modal Box Button-->
<div class="slds-modal__footer">
<button class="slds-button slds-button--brand" onclick="{!c.handleCloseModal}">Cancel</button>
</div>
</div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
</aura:if>
</div>
</aura:component>
//ModalPop.JS
({
handleOpenModal : function(component, event, helper) {
//For Display Modal, Set the "openModal" attribute to "true"
component.set("v.openModal", true);
},

handleCloseModal: function(component, event, helper) {
//For Close Modal, Set the "openModal" attribute to "fasle"
component.set("v.openModal", false);
}
})
//ModalPopupApplication

<aura:application extends="force:slds">
<c:ModalPopupComponent/>
</aura:application>

Leave a Reply