Modal Box in Lightning Component

Modal Popup Component:

<!--ModalPopup.app-->
<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">
                        <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">Biswajeet Samal</h1>
                    </div>
                    
                    <!--Modal Box Header--> 
                    <div class="slds-modal__content slds-p-around--medium">
                        <center> <p><b>
                            Welcome to Biswajeet Samal's 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>

Modal Popup Component JS Controller:

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

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:ModalPopup />
</aura:application>

Output: