Create a custom modal popup in Lightning Web Component

We are creating a custom modal popup window in salesforce lightning web component (LWC). By Using client side(Javascript) function.

customModalLwc.html [Lightning Web Component]

  
    <template>
    <lightning-card title="Display Popup/Modal In Salesforce Lightning Web Component" icon-name="custom:custom21">

      <!-- lightning button for open modal window -->
    <lightning-button variant="brand"
    label="Open Modal"
    title="Open Modal"
    onclick={showModalPopup}
    class="slds-m-left_x-small"></lightning-button>

        <!-- modal start -->        
   <template if:true={contactFormModal}>

    <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 header start -->
           <header class="slds-modal__header">
              <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalPopup}>
                 <lightning-icon icon-name="utility:close"
                    alternative-text="close"
                    variant="inverse"
                    size="small" ></lightning-icon>
                 <span class="slds-assistive-text">Close</span>
              </button>
              <h2 class="slds-text-heading_medium slds-hyphenate">
Contact Form with LWC</h2>
</header>
           <!-- modal body start -->
           <div class="slds-modal__content slds-p-around_medium">

            <div class="slds-grid slds-wrap">
                <div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
                    <lightning-input label="Name" value={nameInpVal} onchange={keyInpValChange}></lightning-input>
                </div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
                    <lightning-input label="Phone" value={phoneInpVal} onchange={keyInpValChange}></lightning-input>
                </div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
                    <lightning-input label="Email" value={emailInpVal} onchange={keyInpValChange}></lightning-input>
                </div>
<div class="slds-col slds-size_6-of-12 slds-p-horizontal--medium slds-m-bottom_medium">
                    <lightning-input label="Designation" value={designationInpVal} onchange={keyInpValChange}></lightning-input>
                </div>
</div>
<!-- modal footer start-->
           <footer class="slds-modal__footer">
              <button class="slds-button slds-button_neutral" onclick={hideModalPopup}>Cancel</button>
           </footer>
        </div>
</div>
</section>
     <div class="slds-backdrop slds-backdrop_open">
</div>
</template>
<!-- modal end --> 

    <div class="slds-text-align_center slds-m-top_medium">
 <lightning-button variant="brand" label="Submit" onclick={submitAction}></lightning-button></div>
</lightning-card>  
</template>

customModalLwc.js [JavaScript File]
customModalLwc.js-meta.xml [MetaData File]

To know more live demo in LWC, Use this link..