How to Create Modal/PopUp in Lightning Component

Hello friends today post ,, How to Create Modal/PopUp in Lightning Component
so let us start......

Step=>1.
                        goto developer console
                                                              File=>New=>Lightning Component


                                   Modal.cmp

 <aura:component>
    <!--Boolean attribute to indicate if modal is open or not
       default value is false as modal is closed when page is loaded
    -->
    <aura:attribute name="isModalOpen" type="boolean" default="false"/>
 
    <div class="slds-m-around_xx-large">
        <lightning:button variant="brand"
                          label=" Modal/PopUp Box"
                          title=" Modal/PopUp Box"
                          onclick="{! c.openModel }" />
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->
        <aura:if isTrue="{!v.isModalOpen}">
         
            <!-- Modal/Popup Box starts here-->
            <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/Popup Box Header Starts here-->
                    <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">Modal/PopUp Box</h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <!-- form -->
                        <form>
                            <div class="slds-grid">
                                <div class="slds-col slds-p-horizontal_medium">
                                    <div class="slds-form-element">
                                        <label class="slds-form-element__label" for="text-input-id-1">First Name</label>
                                        <div class="slds-form-element__control">
                                            <input type="text" id="text-input-id-1" placeholder="First Name" class="slds-input" />
                                        </div>
                                    </div>
                                </div>
                             
                                <div class="slds-col slds-p-horizontal_medium">
                                    <div class="slds-form-element">
                                        <label class="slds-form-element__label" for="text-input-id-1">Last Name</label>
                                        <div class="slds-form-element__control">
                                            <input type="text" id="text-input-id-1" placeholder="Last Name" class="slds-input" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                         
                            <div class="slds-grid">
                                <div class="slds-col slds-p-horizontal_medium">
                                    <div class="slds-form-element">
                                        <label class="slds-form-element__label" for="text-input-id-1">Mobile </label>
                                        <div class="slds-form-element__control">
                                            <input type="Number" id="text-input-id-1" placeholder="Mobile" class="slds-input" />
                                        </div>
                                    </div>
                                </div>
                             
                                <div class="slds-col slds-p-horizontal_medium">
                                    <div class="slds-form-element">
                                        <label class="slds-form-element__label" for="text-input-id-1">Email</label>
                                        <div class="slds-form-element__control">
                                            <input type="email" id="text-input-id-1" placeholder="Email" class="slds-input" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                         
                            <fieldset class="slds-form-element slds-form-element_stacked">
                                <legend class="slds-form-element__legend slds-form-element__label">Sex</legend>
                                <div class="slds-form-element__control">
                                    <span class="slds-radio">
                                        <input type="radio" id="radio-15" value="radio-15" name="options" />
                                        <label class="slds-radio__label" for="radio-15">
                                            <span class="slds-radio_faux"></span>
                                            <span class="slds-form-element__label">Male</span>
                                        </label>
                                    </span>
                                    <span class="slds-radio">
                                        <input type="radio" id="radio-16" value="radio-16" name="options" />
                                        <label class="slds-radio__label" for="radio-16">
                                            <span class="slds-radio_faux"></span>
                                            <span class="slds-form-element__label">Female</span>
                                        </label>
                                    </span>
                                </div>
                            </fieldset>
                            <fieldset class="slds-form-element slds-form-element_stacked">
                                <legend class="slds-form-element__legend slds-form-element__label">Are Your Indian Citizen?</legend>
                                <div class="slds-form-element__control">
                                    <div class="slds-checkbox">
                                        <input type="checkbox" name="default" id="checkbox-27" value="checkbox-27" />
                                        <label class="slds-checkbox__label" for="checkbox-27">
                                            <span class="slds-checkbox_faux"></span>
                                            <span class="slds-form-element__label">Yes</span>
                                        </label>
                                    </div>
                                 
                                </div>
                            </fieldset>
                         
                            <fieldset class="slds-form-element slds-form-element_compound slds-form-element_address">
                                <legend class="slds-form-element__legend slds-form-element__label">Address</legend>
                                <div class="slds-form-element__control">
                                    <div class="slds-form-element__row">
                                        <div class="slds-size_1-of-1">
                                            <div class="slds-form-element">
                                                <label class="slds-form-element__label" for="form-element-id-04">Street</label>
                                                <div class="slds-form-element__control">
                                                    <textarea id="form-element-id-04" required="" class="slds-textarea" placeholder=""></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                            <div class="slds-form-element">
                                                <label class="slds-form-element__label" for="form-element-id-05">City</label>
                                                <div class="slds-form-element__control">
                                                    <input type="text" id="form-element-id-05" required="" class="slds-input" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="slds-size_2-of-6">
                                            <div class="slds-form-element">
                                                <label class="slds-form-element__label" for="form-element-id-06">State/Province</label>
                                                <div class="slds-form-element__control">
                                                    <input type="text" id="form-element-id-06" required="" class="slds-input" value="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="slds-form-element__row">
                                        <div class="slds-size_4-of-6">
                                            <div class="slds-form-element">
                                                <label class="slds-form-element__label" for="form-element-id-07">Zip/Postal Code</label>
                                                <div class="slds-form-element__control">
                                                    <input type="text" id="form-element-id-07" required="" class="slds-input" value="" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="slds-size_2-of-6">
                                            <div class="slds-form-element">
                                                <label class="slds-form-element__label" for="form-element-id-08">Country</label>
                                                <div class="slds-form-element__control">
                                                    <input type="text" id="form-element-id-08" required="" class="slds-input" value="" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                         
                         
                         
                        </form>
                    </div>
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand"
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    </div>
</aura:component>

Step=>2.

                  ModalController.js

({
   openModel: function(component, event, helper) {
      // Set isModalOpen attribute to true
      component.set("v.isModalOpen", true);
   },

   closeModel: function(component, event, helper) {
      // Set isModalOpen attribute to false
      component.set("v.isModalOpen", false);
   },

   submitDetails: function(component, event, helper) {
      // Set isModalOpen attribute to false
      //Add your code to call apex method or do some processing
      component.set("v.isModalOpen", false);
   },
})

                                                        Output:

Note: you can change fields within modal ,, if you want change then go to Modal.cmp page or bundal and then change or delete the form and then run again for check output.

Thanks..!

Buy me a coffee