Create a Modal using new Lightning-Modal component

So for, we don't have any lightning web component to create popup modal window in salesforce. workaround, we have used SLDS model classes to create modal windows look and feel. but in Salesforce winter 23 release, they have introduced modal component. with this new Modal component, we can simply create lightning models in lwc components.

Steps to create New Lightning Modal

we need two components, one component have modal to show and another component is for calling the model component.

newLightningModal.html

<template>
    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
    <lightning-modal-body> 
        <p>this your model content body</p>
    </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="close" onclick={closeModal}></lightning-button>
    </lightning-modal-footer>
</template>

Lightning component modal mainly have 3 parts. header, body and footer. header and footer are optional, but body is required to create modal. 

newLightningModal.js

import LightningModal from 'lightning/modal';

export default class NewLightningModal extends LightningModal {
    closeModal(){
        this.close();
    }
}

here, first we need to import lightningModal from lightning modal base component and have to extend with LightningModal.

newLightningModal.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

the second component is for calling the lightning modal component to open it.

newLightningModalOpener.html

<template>
    <lightning-button label="Open Modal" onclick={openModal}></lightning-button>
</template>

newLightningModalOpener.js

import { LightningElement } from 'lwc';
import NewLightningModal from 'c/newLightningModal';
export default class NewLightningModalOpener extends LightningElement {
    openModal() {
        NewLightningModal.open();
    }
}

here, we need to import the component one , created above. then we have to call open method. 

Open method is asynchronous method. and it can takes following params, all of them are optional.

• label: is used to set Model header label.
• size: is used to set the modal size, Supported values are small, medium, large, and full. default value is medium.
• disableClose: force user to take an action on model window before closing the modal.

we can also pass data from open method with api properties. to know how, click to read full article here.

newLightningModalOpener.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Home</target>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo

Source:
https://developer.salesforce.com/docs/component-library/bundle/lightning-modal/documentation