How To Create Modal/Popup Box In Salesforce Lightning Component

What is Modal in Salesforce Lightning Experience ?

Modals/Popup Box are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.

Modal/Popup Lightning Component Salesforce looks like following image

Download All webseries Free kk_ModalPopup (COMPONENT)

<aura:component>

    <!--use boolean attribute for Store true/false value,

    make default to "false" so modal box are not display on the load of component. 

    --> 

    <aura:attribute name="isModalOpen" type="boolean" default="false"/>

    

    <!--Use "slds-m-around_xx-large" class to add standard X-Large padding to the component--> 

    <div class="slds-m-around_xx-large">

        

        <lightning:button variant="brand"

                          label="My SFDC BLOG"

                          title="My SFDC BLOG"

                          onclick="{!c.openModel}" />

        <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->   

        <aura:if isTrue="{!v.isModalOpen}">

            <!--###### MODAL BOX Start######--> 

            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">

                <div class="slds-modal__container">

                    <!-- ###### MODAL BOX HEADER Start ######-->

                    <header class="slds-modal__header">

                        <lightning:buttonIcon iconName="utility:close"

                                              onclick="{! c.closeModel }"

                                              alternativeText="close"

                                              variant="bare-inverse"

                                              class="slds-modal__close"/>

                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About MODAL POP-UP</h2>

                    </header>

                    <!--###### MODAL BOX BODY Part Start######-->

                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                        <p><b>Modals are used to display content in a layer above the app. 

                              This paradigm is used in cases such as the creation or editing of a record, 

                              as well as various types of messaging and wizards.

                            </b>

                        </p>

                    </div>

                    <!--###### MODAL BOX FOOTER Part Start ######-->

                    <footer class="slds-modal__footer">

                        <lightning:button variant="neutral" 

                                          label="Cancel"

                                          title="Cancel"

                                          onclick="{! c.closeModel }"/>

                        <lightning:button variant="brand" 

                                          label="Close"

                                          title="Close"

                                          onclick="{!c.likenClose}"/>

                    </footer>

                </div>

            </section>

            <div class="slds-backdrop slds-backdrop_open"></div>

            <!--###### MODAL BOX Part END Here ######-->

            

        </aura:if>

    </div>

</aura:component>

 

kk_ModalPopupController(Controller)

({

   openModel: function(component, event, helper) {

      // for Display Model,set the "isOpen" attribute to "true"

      component.set("v.isModalOpen", true);

   },

 

   closeModel: function(component, event, helper) {

      // for Hide/Close Model,set the "isOpen" attribute to "Fasle"  

      component.set("v.isModalOpen", false);

   },

 

   likenClose: function(component, event, helper) {

      // Display alert message on the click on the "Like and Close" button from Model Footer 

      // and set set the "isOpen" attribute to "False for close the model Box.

      //alert('thanks for like Us :)');

      component.set("v.isModalOpen", false);

   },

})

auraApplication

aura:application extends="force:slds" >

 

    <c:kk_ModalPopup/>

</aura:application>

Happy Coding Sharing Is caring. 😀😀😀