How to create Popup/Modal box in Salesforce Lightning Web Components

This post explains how to create Popup/Modal Box in Lightning Web components
What is Modal Box?
A modal dialog is a window that forces the user to interact with it before they can go back to using the parent application.

Example

LWCModalBoxDemo.html

<template>
    <div class="slds-theme_default">
        <center>
        <p><b>Show Modal Box using Lightning Web Componentes</b></p><br/><br/>
        <lightning-button label="Show Modal" variant="brand" onclick={openmodal}></lightning-button>
        </center>

        <template if:true={openmodel}>
        <div class="demo-only" style="height: 640px;">
            <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">
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                            <lightning-icon icon-name="utility:close" size="medium">
                            </lightning-icon>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Box Example</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <center><h2><b>Welcome to Salesforce Code Crack</b></h2><br/>
                            <p>Happy Learning!!!</p>
                        </center>
                    </div>
                    <footer class="slds-modal__footer">
                        <lightning-button label="Cancel" variant="neutral" onclick={closeModal}></lightning-button>&nbsp;&nbsp;&nbsp;&nbsp;
                        <lightning-button label="Save" variant="brand" onclick={saveMethod}></lightning-button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
        </template>
    </div>
</template>

LWCModalBoxDemo.js

import { LightningElement, track } from 'lwc';

export default class LWCModalBoxDemo extends LightningElement {
    @track openmodel = false;
    openmodal() {
        this.openmodel = true
    }
    closeModal() {
        this.openmodel = false
    } 
    saveMethod() {
        alert('save method invoked');
        this.closeModal();
    }
}

LWCModalBoxDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWCModalBoxDemo">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Result

Happy Learning!!!