How to create Modal Popup in Lightning Component Salesforce

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

   <div class="slds-m-around_xx-large">
      <lightning:button variant="brand"
         label="Open Modal"
         title="Open Modal"
         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 Box Header
                  </h2>
               </header>

               <!--Modal Body Start here-->
               <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                  <p>
                     Hello friends today we will learn how to show modal/popup in Lightning 
                     Web Component.  We use Modal to show some extra info or edit the record etc.       
                  </p>
               </div>

               <!--Modal Footer Start 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.saveDetails}"/>
               </footer>
            </div>

         </section>
         <div class="slds-backdrop slds-backdrop_open"></div>
      </aura:if>
   </div>
</aura:component>

({
   openModel: function(component, event, helper) {
      // Set isModalOpen true
      component.set("v.isModalOpen", true);
   },
  
   closeModel: function(component, event, helper) {
      // Set isModalOpen false
      component.set("v.isModalOpen", false);
   },
  
   saveDetails: function(component, event, helper) {
	//do something 
      component.set("v.isModalOpen", false);
   },
})